JavaScript addEventListener по какой-то причине не работает - PullRequest
Новая
       23

JavaScript addEventListener по какой-то причине не работает

0 голосов
/ 09 мая 2018

Я изучаю JavaScript и пытаюсь добавить прослушиватель событий для моей кнопки. Вот мой HTML (Да, скрипт загружается после кнопки): 

<html>
   <body>
      <button>Click me</button>
   <body>

   <script src="experimenting2.js"></script>
</html>

А вот мой код JS: 

alert("Connected");
var body = document.getElementByTagName("body");
var button = document.getElementByTagName("button");

button.addEventListener("click", function() {
   alert("Clicked");

   body.style.background = "pink";

});

Первое предупреждение в начале файла JS срабатывает, когда я загружаю страницу, но второе предупреждение внутри addEventListener не срабатывает.

Ответы [ 4 ]

0 голосов
/ 09 мая 2018

на самом деле проблема в том, что вы звоните getElementByTagName, а это getElementsByTagName. также он возвращает массив элементов.

проверьте рабочий образец: 

console.log("Connected");
var body = document.getElementsByTagName("body")[0];
var button = document.getElementsByTagName("button")[0];

button.addEventListener("click", function() {
  console.log("Clicked");
  body.style.background = "pink";

});
<html>

<body>
  <button>Click me</button>

  <body>

    <script src="experimenting2.js"></script>

</html>

Также убедитесь, что будет проще использовать свойство id и функцию getElementById

console.log("Connected");
var body = document.getElementById("body");
var button = document.getElementById("button");

button.addEventListener("click", function() {
  console.log("Clicked");
  body.style.background = "pink";

});
<html>

<body id="body">
  <button id="button">Click me</button>

  <body>

    <script src="experimenting2.js"></script>

</html>
0 голосов
/ 09 мая 2018

Подпись метода для получения элементов по имени тега: 

getElementsByTagName(..)

Но вы используете 

getElementByTagName(..)

Любой способ в следующем коде 

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

Вы получаете набор кнопок, а не одну кнопку.Где вы хотите добавить EventListener?Лучшим способом может быть доступ к элементу по идентификатору, назначив идентификатор кнопке в HTML 

var button = document.getElementById("someid");

В противном случае вы также можете попробовать, поскольку у вас есть только одна кнопка, которую вы собираетесь добавить EventListener в 

var button = document.querySelector("button");
0 голосов
/ 09 мая 2018

getElementByTagName должно быть getElementsByTagName

И вы можете использовать querySelector вместо getElementsByTagName следующим образом: 

var button = document.querySelector("button");

И вам не нужно присваивать переменную для тела. Просто укажите это с помощью document.body следующим образом: 

document.body.style.background = "pink";

Итак, ваш полный код должен выглядеть так: 

alert("Connected");
var button = document.querySelector("button");

button.addEventListener("click", function() {
   alert("Clicked");

   document.body.style.background = "pink";

});
<button>Click me</button>

jsFiddle: https://jsfiddle.net/AndrewL64/2cscc5ka/

0 голосов
/ 09 мая 2018

Нет ничего похожего на document.getElementByTagName("body"); Это document.getElementsByTagName("body");, который возвращает вам коллекцию, и вам нужно перебрать эту коллекцию, чтобы прикрепить события к каждому узлу в ней

Или вы можете использовать document.querySelector('body') для выбора тела и document.querySelector('button') для выбора кнопки

Читайте здесь о document.querySelector

alert("Connected");
var body = document.querySelector("body");
var button = document.querySelector("button");

button.addEventListener("click", function() {
   alert("Clicked");

   body.style.background = "pink";

});
<html>
   <body>
      <button>Click me</button>
   <body>

   
</html>
...