我的 Javascript 代码不起作用，这是怎么回事？

Question

My javascript code won't work one bit and I honestly have no idea why. I'm still very new to javascript so if someone can point out where I'm going wrong, I'll very much appreciate it. It's supposed to be a pixel art maker where you can make a table based on user input and color each separate cell.

Edit: Sorry, I should have made myself clearer. For example: entering 5 in 'Grid Height' and 5 in 'Grid Width' then clicking the "Submit" button should produce a 5 x 5 table/grid below 'Design Canvas'. But when I do that, the numbers just resets to 1 and no grid is displayed. Basically, nothing happens. I know I might be missing a lot of code, but no errors are displayed in DevTools. For the color, choosing a color from 'Pick A Color' and then clicking on a cell should only fill that cell. Clicking 'Submit' again should reset the table.

 var table = document.getElementById("pixelCanvas"); var height = document.getElementById("inputHeight").value; var width = document.getElementById("inputWidth").value; var color = document.getElementById("colorPicker"); var submit = document.getElementById("submit"); var size = document.getElementById("sizePicker"); submit.addEventListener("click", makeGrid); function makeGrid(height, width) { height, width.preventDefault(); table.innerHTML = ""; for (let x = 0; x < height; x++) { var tr = table.insertRow(x); for (let y = 0; y < width; y++) { var td = tr.insertCell(y); table.appendChild(tr); td.addEventListener("click", fillCell); tr.appendChild(td); } table.appendChild(tr); } } function fillCell(event) { event.preventDefault(); event.style.backgroundColor = color.value; }

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

 <h1>Pixel Art Maker</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" id="submit"> </form> <h2>Pick A Color</h2> <input type="color" id="colorPicker"> <h2>Design Canvas</h2> <table id="pixelCanvas"></table>

Answer 1

When you click on a cell, there is no need to prevent default. You will need to access the event target first, before accessing the style property.

Also, add the submit event to the form, rather than to the button. You can access form elements off of the form, so that you do not need to store so many globals.

 const form = document.getElementById("sizePicker"), table = document.getElementById("pixelCanvas"), color = document.getElementById("colorPicker"); form.addEventListener("submit", makeGrid); function makeGrid(e) { const form = e.target, width = form.elements.inputWidth.value, height = form.elements.inputHeight.value; table.innerHTML = ""; for (let x = 0; x < height; x++) { var tr = table.insertRow(x); for (let y = 0; y < width; y++) { var td = tr.insertCell(y); table.appendChild(tr); td.addEventListener("click", fillCell); tr.appendChild(td); } table.appendChild(tr); } } function fillCell(e) { e.target.style.backgroundColor = color.value; }

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

 <h1>Pixel Art Maker</h1> <h2>Choose Grid Size</h2> <form id="sizePicker" onsubmit="return false;"> 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" id="submit"> </form> <h2>Pick A Color</h2> <input type="color" id="colorPicker"> <h2>Design Canvas</h2> <table id="pixelCanvas"></table>

Answer 2

They key issue is that you were assigning the value of the inputs to the variables immediately instead of allowing the function to get the values.

1. Coerce the strings from the values to Numbers, and use those in your loops.

2. Remove the <form> element completely and change the <input type="submit" /> to a button with a type="button" attribute.

3. In fillCell use event.target to access the element that was clicked on.

 var table = document.getElementById("pixelCanvas"); var height = document.getElementById("inputHeight"); var width = document.getElementById("inputWidth"); var color = document.getElementById("colorPicker"); var submit = document.getElementById("submit"); var size = document.getElementById("sizePicker"); submit.addEventListener("click", makeGrid); function makeGrid() { table.innerHTML = ""; for (let x = 0; x < Number(height.value); x++) { var tr = table.insertRow(x); for (let y = 0; y < Number(width.value); y++) { var td = tr.insertCell(y); table.appendChild(tr); td.addEventListener("click", fillCell); tr.appendChild(td); } table.appendChild(tr); } } function fillCell(event) { event.target.style.backgroundColor = color.value; }

 body{text-align:center;background-color:#fff;color:plum;font-family:Roboto,sans-serif}h1{font-family:Roboto,sans-serif;font-size:70px;margin:.2em}h2{margin:1em 0.25em}h2:first-of-type{margin-top:.5em}table,td,tr{border:2px solid #000}table{border-collapse:collapse;margin:0 auto;color:#000}tr{height:20px}td{width:20px}input[type=number]{width:6em}

 <h2>Choose Grid Size</h2> 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"> <button type="button" id="submit">Submit</button> <h2>Pick A Color</h2> <input type="color" id="colorPicker"> <h2>Design Canvas</h2> <table id="pixelCanvas"></table>