个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 09:23:28 26 4
gpt4 key购买 nike

我目前正在尝试在我的像素艺术程序中实现绘画功能，但我遇到的问题是，当我将 eventListener 添加到我想要绘画的元素时，没有任何反应。我检查了控制台中的测试并更改了 CSS 中的元素颜色，它成功地更改了颜色。我在 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.

// 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

<!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>

最佳答案

有几个问题，但最相关的是表格单元格 (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>

希望对你有帮助。

关于javascript - 使用 JavaScript DOM 更改特定元素的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50313975/

26 4 0
文章推荐： javascript - 检查网络摄像头是否已激活
文章推荐： javascript - 为什么我们需要 Angular 服务
文章推荐： java - 关于java中迭代加深深度优先搜索的问题
文章推荐： javascript - 如何在多个标签上搜索 npmjs.com 包？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com