Question

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

能否请您看看我的代码，并告诉我它有什么问题？是否有任何建议可以帮助我改善代码编写？

代码不断说出类似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>

Answer 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);
  });
});

Answer 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');

x.addEventListener不是函数吗？

2 个答案: