x.addEventListener 不是函数吗？答案

【问题标题】：x.addEventListener is not a function?x.addEventListener 不是函数吗？
【发布时间】：2019-08-22 15:03:49
【问题描述】：

我正在做一个小项目来准备考试我有一些表格，我必须将每个表格的颜色随机更改为红色或绿色以及其他一些东西，但我的问题是即使按下“开始”按钮后颜色也不会显示。

您能看看我的代码并告诉我它有什么问题吗？如果有什么建议可以帮助我改进我的代码编写？

代码一直说 button.addeventlistener 不是函数。

我浏览了论坛，其中大多数都在谈论更改脚本的位置，但这样做并没有帮助。我什至在索引文件中编写了整个脚本.. 这也没有改变任何东西谢谢

代码：

给定以下 HTML/CSS 代码，该代码绘制一个包含 20 个按钮的表格，以及一个动作“开始”按钮：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      button:not(#start) {
        height: 100px;
        width: 100px;
      }
      #start {
        font-size: 40px;
        width: 310px;
        text-align: center;
        margin-left: 105px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td><button></button></td>
        <td><button></button></td>
        <td><button></button></td>
        <td><button></button></td>
        <td><button></button></td>
      </tr>
      <tr>
        <td><button></button></td>
        <td><button></button></td>
        <td><button></button></td>
        <td><button></button></td>
        <td><button></button></td>
      </tr>
      <tr>
        <td><button></button></td>
        <td><button></button></td>
        <td><button></button></td>
        <td><button></button></td>
        <td><button></button></td>
      </tr>
      <tr>
        <td><button></button></td>
        <td><button></button></td>
        <td><button></button></td>
        <td><button></button></td>
        <td><button></button></td>
      </tr>
    </table>

    <button id="start">
      START
    </button>
<script>var rand;
  // Math.floor((Math.random()*1)+1);
  //question 1
  var button = document.getElementsByTagName('button');
  var td =document.getElementsByTagName('td');
  var btn =document.getElementById('start');
  btn.addEventListener('click',function(e){
      console.log("ali");
      for(var i=0 ;i< button.length;i++){
      rand=  Math.floor((Math.random()*2));
      console.log(rand);
      if(rand==1){
          button[i].style.backgroundcolor="red";
          console.log("red")
      }
      else if(rand==0){
      button[i].style.backgroundcolor="green";
  console.log("green")
  }
      }})
  //question 2

  button.addEventListener('click',function(e){

  if(button.target.style.backgroundcolor=="red")
  button.target.style.backgroundcolor=="";




  })

  //question 3

  for (var i=0;i<button.length;i++){
  if(button[i].style.backgroundcolor!="green")
  i--;

  if(i==button.length){
  alert("You Won");
  //question 4
  for (var i=0;i<button.length;i++){
  button[i].style.backgroundcolor=="";


  }


  }
  }

  //question 5

  btn.addEventListener('click',function(e){
  button[i].style.backgroundcolor=="";






  })

   </script>

  </body>
</html>

【问题讨论】：

是addEventListener 不是addeventListener
button 是一个NodeList （多个元素的列表），因此您需要循环它并将事件侦听器分别添加到每个按钮。我建议您为变量选择一个不太容易混淆的名称。
@CodeManiac 我在写帖子或标题时也没有大写。但它在代码中正确写入
@TiiJ7 x.target 不会解决这个问题吗？如果不是，请您澄清一下它的用途吗？
还有，节点和数组有什么区别？

标签： javascript dom addeventlistener

【解决方案1】：

var button = document.getElementsByTagName('button');

结果是HTMLCollection（类似数组）

要向目标添加事件监听器，您必须遍历它们。

从 HTMLCollection 创建一个真正的数组
循环遍历它并向目标元素添加事件监听器。

var button = document.getElementsByTagName('button');

Array.from(button).forEach(e => {
  e.addEventListener('click', function(e) {
     console.log(this);
  });
});

【讨论】：

【解决方案2】：

由于document.getElementsByTagName() 返回元素的集合而不是单个元素，因此您必须遍历它们。示例：

var buttons = document.getElementsByTagName('button'); // get the buttons
for (var i = 0; i < buttons.length; i++) { // loop over them
  buttons[i].addEventListener('click', function(e) {
    // your event code here
  }); // add event listener to each one
}

请注意，这也会将事件侦听器应用于Start 按钮（因为它也是一个按钮），因此如果您希望防止这种情况发生，您可以将id 属性添加到根<table> 元素（例如：<table id="button_table">）并像这样使用Element.getElementsByTagName()：

var button_table = document.getElementById('button_table');
var buttons = button_table.getElementsByTagName('button');

【讨论】：

谢谢你的回答:)