时间戳

首页 > 解决方案 > x.addEventListener 不是函数吗？

javascript - x.addEventListener 不是函数吗？

问题描述

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

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

代码继续说 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>

标签： javascriptdomaddeventlistener

解决方案

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

结果是一个HTMLCollection（类似数组）

要将事件侦听器添加到目标，您必须遍历它们。

  1. 从 HTMLCollection 创建一个真正的数组
  2. 循环遍历它并向目标元素添加一个事件监听器。
var button = document.getElementsByTagName('button');

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

推荐阅读