Question

我正在尝试创建可点击的网格。

When the user clicks a grid
Then fill that box with a chosen color
And continue filling cells
But if user clicks mouse
Then stop filling cells

When the user inputs grid dimensions
Then create the grid cells

我具有基本的网格结构，但它先出现然后消失。

function makeGrid() {
  var heights = document.getElementById("inputHeight").value;
  var widths = document.getElementById("inputWidth").value;
  for (var i=0; i<heights; i++){
    for (var j=0; j<heights; j++){
      var x = document.createElement("CANVAS");
      var ctx = x.getContext("2d");
      //stroke(0);
      ctx.fillStyle = "white";
      ctx.fillRect(63*heights, 63*widths, 63, 63);
      document.body.appendChild(x);
    }
  }
}

body {
    text-align: center;
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}

<!DOCTYPE html>
<html>
<head>
<style>
canvas {
  border: 1px solid black;
}
</style>
    <title>Clickable Grid!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Clickable Grid</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="inputWidth" name="width" min="1" value="1">
        <input type="submit" value= "submit" onClick = "makeGrid()">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>
</body>
</html>

Answer 1

submit事件正在触发刷新。您需要使用submit事件并阻止其默认操作。

此外，由于makeGrid()的两个循环都使用了height值，因此在function makeGrid(ev) { ev.preventDefault(); var heights = document.getElementById("inputHeight").value; var widths = document.getElementById("inputWidth").value; for (var i=0; i<heights; i++){ for (var j=0; j<widths; j++){ var x = document.createElement("CANVAS"); var ctx = x.getContext("2d"); //stroke(0); ctx.fillStyle = "white"; ctx.fillRect(63*heights, 63*widths, 63, 63); document.body.appendChild(x); } } }中网格宽度出现了一个一一错误。网格未如您所愿显示，因为逻辑需要修改（超出此问题的范围）：

body {
    text-align: center;
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}

<!DOCTYPE html>
<html>
<head>
<style>
canvas {
  border: 1px solid black;
}
</style>
    <title>Clickable Grid!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Clickable Grid</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker" onsubmit="makeGrid(event)">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="inputWidth" name="width" min="1" value="1">
        <input type="submit" value= "submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>
</body>
</html>

<Condition Binding="{Binding Path=(Validation.HasError), ElementName=text1, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"

在JS中创建网格图

1 个答案: