我怎样才能使清除按钮在此代码上正常工作？

Question

我正在尝试做一个简单的程序来填充一些 div，我需要一个重置按钮才能清除所有充满内容的 div，这样用户就可以再次在 div 上输入。 这是我的代码：

// **reset function**:
const clearAll = document.getElementsByClassName("clear");
clearAll.addEventListener('click', clearCells);

function clearCells(){
  for (let i = 0; i < cells.length; i++){
    cells[1] = "green";
  }
}

很抱歉这个菜鸟问题，仍在尝试解决一些问题。

Answer 1

 //default color let fillColor = "red"; //select all colors const colorDivs = document.querySelectorAll(".colors"); //listen to all colors if one of them clicked colorDivs.forEach(function (color) { color.addEventListener("click", pickColor); }) //take the color of it and put it in fillColor function pickColor(event) { fillColor = event.target.style.backgroundColor; } //select all colors const cells = document.querySelectorAll(".cell"); //listen to all cells if one of them clicked cells.forEach(function (cell) { cell.addEventListener("click", paintCell); }) //color it with the fillColor picked function paintCell(event) { event.target.style.backgroundColor=fillColor; } //get the button clear All const clearAll = document.getElementsByClassName("clear")[0]; //if clicked clearAll.addEventListener('click', clearCells); //set all cells to white color function clearCells(){ for (let i = 0; i < cells.length; i++){ cells[i].style.backgroundColor = "white"; } }

 table, tr, td { font-size: 24px; border: 1px solid black; border-collapse: collapse; } td { height: 70px; width: 80px; text-align: center; cursor: pointer; }.colors{ width: 50px; height: 50px; display: inline-block; cursor: pointer; } button{ background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; font-size: 24px; }

 <div class="colors" style="background-color: red"></div> <div class="colors" style="background-color: green"></div> <div class="colors" style="background-color: blue"></div> <table> <tr> <td class='cell'>cell 1</td> <td class='cell'>cell 2</td> <td class='cell'>cell 3</td> </tr> <tr> <td class='cell'>cell 4</td> <td class='cell'>cell 5</td> <td class='cell'>cell 6</td> </tr> </table> <button class="clear">clear all</button>

Answer 2

编辑

getElementsByClassName 返回 class 明确的元素数组，因此您需要获取第一个，否则您的 function 将永远不会被调用

const clearAll = document.getElementsByClassName("clear")[0];
clearAll.addEventListener('click', clearCells);

第一次修复

cells[i].className = 'cell'

Answer 3

错误在最后一部分。

改变这个

    // **reset function**:
    const clearAll = document.getElementsByClassName("clear");
    clearAll.addEventListener('click', clearCells);
    
    function clearCells(){
        for (let i = 0; i < cells.length; i++){
            cells[1] = "white";
        }
    }

为了这：

    // **reset function**:
    document.getElementsByClassName("clear").forEach(function (cell) {
            cell.addEventListener('click', clearCells);
    });

    function clearCells(){
        cells.forEach(function (cell) {
            cell.className = 'white';
        });
    }