My Javascript code won't work, what's wrong with it?-CodePudding

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.

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>

CodePudding user response：

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>

CodePudding user response：

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.

Coerce the strings from the values to Numbers, and use those in your loops.
Remove the <form> element completely and change the <input type="submit" /> to a button with a type="button" attribute.
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>