Javascript 如何创建事件按钮

我目前正在做一个项目。基本上，有一个大的方格，里面有很多小方格。当用户将鼠标移到这些小方块上时，它们会变成黑色。但是，我想创建一个清晰的按钮，将这些正方形的颜色转换为其原始颜色。我有一个代码，但它不工作。我可以把他们的颜色变成黑色，但我不能创建一个事件按钮来清除一切

修改代码，尝试不同的方法

//set values
let tiles = document.getElementsByClassName('newDiv');
let buttons = document.getElementsById('clearbutton');


//make  squares black using mouseover event   
  if(black){  
  for (const tile of tiles) {
    tile.addEventListener('mouseover', e => {
      tile.style.backgroundColor = "black";
    });
  }
}


//turn squares background-color into their original color
for (const cbutton of clearbutton) {
    button.addEventListener('click', e => {
      tiles.style.backgroundColor = "#eee";
    });
  }

getElementById不是函数。

请使用下面的代码

让tiles=document.getElementsByClassName'newDiv'； 让clearbutton=document.getElementById'clearbutton'； 如果黑色{ 瓷砖的连续瓷砖{ tile.addEventListener'mouseover'，e=>{ tile.style.backgroundColor=黑色； }; } } clearbutton.addEventListener'click'，e=>{ 瓷砖的连续瓷砖{ tile.style.backgroundColor=eee； } }; 下面是一个完整的工作示例

var black=true； 让tiles=document.getElementsByClassName'newDiv'； 让clearbutton=document.getElementById'clearbutton'； 如果黑色{ 瓷砖的连续瓷砖{ tile.addEventListener'mouseover'，e=>{ tile.style.backgroundColor=黑色； }; } } clearbutton.addEventListener'click'，e=>{ 瓷砖的连续瓷砖{ tile.style.backgroundColor=eee； } }; 纽迪夫先生{ 宽度：100px； 高度：100px； 显示：内联块； 背景：EEEE； } 清除所有

---

它不是getElementsById，但看起来您也应该为按钮使用类。我已经更改了它，但这次我发现clearbutton的错误是不可编辑的。有很多语法错误，不仅仅是getElementById中的额外s。例如，您有let按钮。。。但你永远不会引用按钮。@tosyn-那是因为它是一个按钮，而不是按钮列表。就用它吧。不要对其中的所有内容进行循环。请创建一个MWE，使用代码片段显示您的问题

<nav id="navbar">
<ul>
  <li><button id = "clearbutton" type="button" style= "width: 200px; height; 150px; background-color: #99CCFF;">Clear</button></li>
</ul>
</nav>
  <div id="container">
  </div>