JavaScript在单击时更改网格单元格的背景颜色_Javascript

JavaScript在单击时更改网格单元格的背景颜色

javascript

JavaScript在单击时更改网格单元格的背景颜色,javascript,Javascript,我的基本HTML如下所示： <!DOCTYPE html> <html> <head> <title>Art Maker!</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton"> <link rel="stylesheet&quo

我的基本HTML如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Pixel Art</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">
    </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>

/函数创建画布

const table = document.getElementById('pixelCanvas');

function createCanvas(event) {
  
  for (let h = 1; h <= height; h++) {
    const row = document.createElement('tr');
    
    for (let w = 1; w <= width; w++) {
      const cell = document.createElement('td');
      
      cell.style.cssText = "height: 15px; width: 15px";
      row.appendChild(cell);
    }
    
    table.appendChild(row);
  }  
}

const form = document.querySelector('form');

//事件侦听器更新颜色

let color = document.getElementById('colorPicker').value;

document.getElementById('colorPicker').onchange = function() {
  color = this.value;
}

//仅当用户单击时激活此功能

function respondToClick(event) {
  if (event.target.nodeName.toLowerCase() === 'td') {
    event.target.style.backgroundColor = color;
  }
}

const tblRow = document.getElementsByTagName('tr');

tblRow.forEach(row => function() {
  row.addEventListener("click", respondToClick);
});

以下是代码中的问题：

document.getElementsByTagName（…）

返回一个无法调用的

.forEach（）

方法。而是使用

document.querySelectorAll（…）

，它返回一个名为

.forEach（）的方法


您需要使用防止submit
事件的默认行为

由于您在文档返回的上调用了.forEach（）
方法。getElementsByTagName（'tr'）
，因此出现错误，并且没有在任何tr
元素上添加事件侦听器
table.addEventListener("click", respondToClick);

不必在每个tr
元素上添加事件侦听器，您可以利用事件冒泡
，只需在表
元素上添加事件侦听器即可
table.addEventListener("click", respondToClick);


以下代码段显示了固定代码示例：

let height=document.getElementById（'inputHeight'）.value；
让宽度=document.getElementById（'inputWidth'）。值；
const gridHeight=document.getElementById（'inputHeight'）；
const gridWidth=document.getElementById（'inputWidth'）；
const table=document.getElementById（'pixelCanvas'）；
const form=document.querySelector（'form'）；
const colorPicker=document.getElementById（'colorPicker'）；
设color=colorPicker.value；
addEventListener（“输入”，函数（）{
高度=document.getElementById（'inputHeight'）。值；
})
addEventListener（“输入”，函数（）{
宽度=document.getElementById（'inputWidth'）。值；
})
函数createCanvas（事件）{
event.preventDefault（）；
对于（设h=1；h几个问题

由于绑定到tr
，您应该在创建行之后绑定click处理程序。或者更好的是，由于您已经委托了事件，请使用table元素绑定处理程序，因为它从一开始就存在

您需要停止表单的实际提交（导致重新加载页面）
创建新画布时，需要清除画布


//获取网格大小值；高度和宽度
const gridHeight=document.getElementById（'inputHeight'）；
const gridWidth=document.getElementById（'inputWidth'）；
让高度=gridHeight.value；
设width=gridWidth.value；
addEventListener（“输入”，函数（）{
高度=document.getElementById（'inputHeight'）。值；
})
addEventListener（“输入”，函数（）{
宽度=document.getElementById（'inputWidth'）。值；
})
const table=document.getElementById（'pixelCanvas'）；
函数createCanvas（事件）{
event.preventDefault（）；
table.innerHTML=''；
for（设h=1；h控制台中是否有错误？另一个您忽略的问题是，您应该绝对为输入字段使用label
。这样您就知道在哪里输入哪个值。@克隆，是的，这是一个很好的做法，但与非工作代码无关：）谢谢你的建议。事实上，我知道使用CSS设置表格、行和单元格的样式更容易。我有意练习JavasScripts，因此我尝试使用JavasScripts做所有事情。只是好奇你的观点…add table.innerHTML=“”在respondToClick事件处理程序中。如何清除表内容？事实上，这是下一步。我将table.innerHTML=“”放在createCanvas中，就在event.preventDefault（）之后。它确实清除了表格内容。我还想知道，在创建表格并单击单元格后，如何使用JS查找背景色？实际上，table.innerHTML='
应该位于createCanvas（）内
function。这是我的答案中的一个错误，现已修复。关于你的第二个问题，我不明白你在问什么，当你说如何使用JS查找背景色？什么的背景色？好的，谢谢你澄清。好的，让我更具体一点。单击单元格后，单元格将显示为签署背景色。在这种情况下，我如何使用JavaScript来确定表中的任何单元格是否具有特定的背景色？例如，我单击表中的一个单元格，该单元格被蓝色填充。我如何列出该单元格的背景色？或者检索表/行并列出背景色？您可以选择全部单击表中的td
元素，然后迭代该集合并使用以获取任何td元素上的样式。
const tblRow = document.querySelectorAll('tr');

function createCanvas(event) {
   event.preventDefault();    
   ...
}

table.addEventListener("click", respondToClick);