HTML 按钮未创建警报答案

【问题标题】：HTML Button not creating alertHTML 按钮未创建警报
【发布时间】：2020-08-06 20:11:36
【问题描述】：

我知道我可能遗漏了一些非常简单的东西，但是为什么单击按钮时没有显示警报？与“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>

【问题讨论】：

标签： javascript html button addeventlistener

【解决方案1】：

检查您的控制台，您可能遇到“addEventListener 不是函数”错误，这是因为

document.getElementsByTagName("tag-name")

返回一个 DOM 元素数组，因为标签名称在 DOM 元素中不是唯一的，例如 id。所以你有两个选项给按钮一个 id 并使用

document.getElementById("button-id")

或者只获取数组中的第一项

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

button.addEventListener("click", function(event){
    alert("Heyyyy!")
})

【讨论】：

感谢您的帮助！你的建议很棒。忘了 getElementsByTagName 返回一个数组。

【解决方案2】：

您可以只使用一个函数和 onclick 属性，如下所示：

HTML

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

function alertFunction(msg) { alert(msg); }

【讨论】：

【解决方案3】：

原因是因为getElementsByTagName(tagName)返回一个Array，所以你必须循环遍历它来添加事件监听器。

但是如果你只需要添加到特定的按钮，那么使用id来引用按钮。

例如

分配给每个按钮：

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

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

Array.from(element) 的需要是因为 HTML 元素是一个类似数组而不是纯数组。

分配给特定按钮：

简单地说：

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

【讨论】：

感谢您的帮助！忘记了 getElementsbyTagName 返回一个数组

【解决方案4】：

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();

【讨论】：