使用JavaScript DOM更改特定元素的颜色？

Question

I am currently trying to implement a paint feature in my pixel art program but the issue I am having is when I add an eventListener to the element I want to paint nothing happens. 我目前正在尝试在像素艺术程序中实现绘画功能，但是我遇到的问题是，当我向想要绘画任何内容的元素添加eventListener时，没有发生。 I checked tests in the console and changed the elements color in CSS and it successfully changed color. 我在控制台中检查了测试，并更改了CSS中的元素颜色，并成功更改了颜色。 I show my code issue lower down the page of the JavaScript Code: 我在JavaScript代码页面的下方显示我的代码问题：

JavaScript 的JavaScript

document.addEventListener('submit', function(event) {
  const height = document.querySelector('#inputHeight').value;
  const width = document.querySelector('#inputWidth').value;

  // cause the 'submit' to not reset page
  event.preventDefault();

  // When size is submitted by the user, call makeGrid()
  makeGrid(height, width);
});

function makeGrid(wid, hi) {

  // Clear the canvas after every 'submit' event
  let pixelNode = document.querySelector('#pixelCanvas');
  while (pixelNode.firstChild) {
    pixelNode.removeChild(pixelNode.firstChild);
  }

  // Select size input
  let shelfWidth = "";
  for (let i = 0; i < wid; i++) {
    shelfWidth += '<td></td>';
  }

  let row = document.querySelector('#pixelCanvas');
  const HTMLToAdd = '<tr>' + shelfWidth + '</tr>';
  for (let j = 0; j < hi; j++) {
    row.insertAdjacentHTML('afterbegin', HTMLToAdd);
  }
}

Here is my issue I see nothing wrong with my code and I dont know why this wouldn't assign each element with the color the user chooses. 这是我的问题 ，我的代码没有发现任何问题，而且我不知道为什么这不会为每个元素分配用户选择的颜色。 The variable 'color' is a string that I am concatenating to the rest of the CSSText. 变量“ color”是我要连接到其余CSSText的字符串。

// Select color input
document.querySelector('td').addEventListener('click', function() {  
   // collect color value from picker to pass into paint funtion
  const color = document.querySelector('#colorPicker').value;  
  document.querySelector('td').style.CSSText = ('background-color: ' + color);
});

HTML 的HTML

<!DOCTYPE html>
<html>

<head>
    <title>Pixel Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Lab: Pixel Art Maker</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="4"> 
        <br>
        Grid Width:
        <input type="number" id="inputWidth" name="width" min="1" value="4">
        <br>
        <br>
        <input type="submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixelCanvas">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
  </table>

    <script src="designs.js"></script>
</body>

</html>

Answer 1

There were several issues, but the most relevant thing was that the table-cells ( td ) were empty and therefore could not be clicked respectively be painted. 有几个问题，但最相关的是表格单元格（ td ）为空，因此无法分别单击来绘制。

 document.addEventListener('submit', function(event) { // cause the 'submit' to not reset page event.preventDefault(); handleSubmitEvent(); }); function handleSubmitEvent(){ const height = document.querySelector('#inputHeight').value; const width = document.querySelector('#inputWidth').value; // When size is submitted by the user, call makeGrid() makeGrid(height, width); } function makeGrid(wid, hi) { // Clear the canvas after every 'submit' event let pixelNode = document.querySelector('#pixelCanvas'); while (pixelNode.firstChild) { pixelNode.removeChild(pixelNode.firstChild); } // Select size input let shelfWidth = ""; for (let i = 0; i < wid; i++) { shelfWidth += '<td>cell</td>'; } let row = document.querySelector('#pixelCanvas'); const HTMLToAdd = '<tr>' + shelfWidth + '</tr>'; for (let j = 0; j < hi; j++) { row.insertAdjacentHTML('afterbegin', HTMLToAdd); } // assign a click handler to the whole table and check whether a cell was clicked row.addEventListener('click', function(event) { // collect color value from picker to pass into paint funtion var cell = event.target; if(cell.tagName.toLowerCase()=="td"){ const color = document.querySelector('#colorPicker').value; event.target.style['background-color'] = color; } }); } // draws 4x4 grid at the beginning so that you to not have to write td hardcoded handleSubmitEvent();

 <!DOCTYPE html> <html> <head> <title>Pixel Art Maker!</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton"> </head> <body> <h1>Lab: Pixel Art Maker</h1> <h2>Choose Grid Size</h2> <form id="sizePicker"> Grid Height: <input type="number" id="inputHeight" name="height" min="1" value="4"> <br> Grid Width: <input type="number" id="inputWidth" name="width" min="1" value="4"> <br> <br> <input type="submit"> </form> <h2>Pick A Color</h2> <input type="color" id="colorPicker"> <h2>Design Canvas</h2> <table id="pixelCanvas"></table> </body>

Hope this helps you. 希望这对您有所帮助。

使用JavaScript DOM更改特定元素的颜色？

问题描述

JavaScript 的JavaScript

HTML 的HTML

1 个解决方案

解决方案1
4 已采纳 2018-05-13 08:12:17

使用JavaScript DOM更改特定元素的颜色？

问题描述

JavaScript 的JavaScript

HTML 的HTML

1 个解决方案

解决方案1 4 已采纳 2018-05-13 08:12:17

解决方案1
4 已采纳 2018-05-13 08:12:17