x.addEventListener не является функцией? - PullRequest
Новая
       14

x.addEventListener не является функцией?

1 голос
/ 01 апреля 2019

Я работал над небольшим проектом, чтобы подготовить себя к экзамену У меня есть какие-то таблицы, и я должен произвольно изменить цвет каждого из них на красный или зеленый, и некоторые другие вещи, но моя проблема в том, что цвета не будут отображаться даже после того, как я нажму кнопку «Пуск».

Не могли бы вы взглянуть на мой код и сказать, что с ним не так? и если есть какие-либо предложения, чтобы помочь мне улучшить мой код написания?

В коде постоянно говорится что-то вроде 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>

Ответы [ 2 ]

1 голос
/ 01 апреля 2019

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);
  });
});
0 голосов
/ 01 апреля 2019

Так как 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');
...