HTML Кнопка не создает оповещение - PullRequest
Новая
       152

HTML Кнопка не создает оповещение

0 голосов
/ 06 августа 2020

Я знаю, что мне, вероятно, не хватает чего-то очень простого, но почему при нажатии кнопки не появляется предупреждение? Это как-то связано с функцией в "addEventListener"?

Спасибо! 

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

button.addEventListener("click", function(event){
    alert("Heyyyy!")
})
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <body>
     <p>
         <button type="button">Click Me!</button>
     </p>
  <script src=Test.js></script>
 </body>
</html>

Ответы [ 4 ]

2 голосов
/ 06 августа 2020

проверьте свою консоль, у вас, вероятно, есть ошибка «addEventListener is not a function», и это потому, что 

document.getElementsByTagName("tag-name")

возвращает массив элементов DOM, поскольку имя тега не является уникальным для элементов DOM, таких как идентификатор . так что у вас есть два варианта: дать кнопке идентификатор и использовать 

document.getElementById("button-id")

или просто получить первый элемент в массиве 

const button = document.getElementsByTagName("button")[0];

button.addEventListener("click", function(event){
    alert("Heyyyy!")
})
0 голосов
/ 06 августа 2020 

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

button.addEventListener("click", function(event){
    alert("Heyyyy!")
})
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <body>
     <p>
         <button type="button">Click Me!</button>
     </p>
  <script src=Test.js></script>
 </body>
</html>
Попробуйте window.addEventListener ();
0 голосов
/ 06 августа 2020

Причина в том, что getElementsByTagName(tagName) возвращает Array , поэтому вы должны oop через него, чтобы добавить прослушиватель событий.

Но если вам нужно только добавить к определенному c, затем используйте id для ссылки на кнопку.

Например,

Чтобы назначить каждой кнопке: 

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

Array.from(button).forEach((el) => {
    el.addEventListener("click", function(event){
    alert("Heyyyy!")
    })
});

Array.from(element) необходимо, потому что HTML элемент представляет собой подобный массиву, а не чистый массив.

Для назначения определенной кнопке c:

Просто:

buttonId.addEventListener('click', function(){})

0 голосов
/ 06 августа 2020

Вы можете просто использовать только функцию и свойство onclick, например:

HTML

<button id="myButton" onclick="var msg='message'; alertFunction(msg);">Click Me!</button>

JS

function alertFunction(msg) { alert(msg); }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...