addEventListener 没有链接到元素 ID？答案

【问题标题】：addEventListener not linking to element Id?addEventListener 没有链接到元素 ID？
【发布时间】：2020-12-09 21:00:34
【问题描述】：

尝试创建一个超级简单的脚本，在单击按钮后向页面表示欢迎。

消息根本没有弹出，我不知道为什么。

按钮的代码是 HTML

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

<div class="container text-center">
       
        <a href="Conditions.aspx"  class="newButton btn" id="EnterButton">
           
        <span>Enter Irish Wrecks</span>
        </a>
         
    </div>

然后是javascript代码

var firstButton = document.getElementById("EnterButton");

firstButton.addEventListener("click", welcomeMessage(), false);

function WelcomeMessage() {
    alert("Welcome to Irish Ship Wrecks");
}

任何能指引我正确方向的帮助将不胜感激。

【问题讨论】：

将 script 移动到 html 的末尾，或关闭 body 标记之前。另一种方法是使用DOMContentLoaded
JavaScript 区分大小写。 welcomeMessage !== WelcomeMessage。此外，如果您添加括号，则您正在执行该函数，而不是将其作为参考传递。省略那些。 firstButton.addEventListener("click", WelcomeMessage, false).

标签： javascript html asp.net visual-studio

【解决方案1】：

首先，您需要确保在 addEventListener 调用中正确编写 WelcomeMessage（因为 Javascript 区分大小写）。此外，您不能添加括号，因为您传递了函数并且不想在 addEventListener 中调用它。我建议您以后使用浏览器的开发者控制台（Chrome 和 Firefox 中的 F12）更快地查明错误。

var firstButton = document.getElementById("EnterButton");

firstButton.addEventListener("click", WelcomeMessage, false);

function WelcomeMessage() {
    alert("Welcome to Irish Ship Wrecks");
}

祝你好运！

PS：还要确保包含正确名称的脚本文件。

【讨论】：

【解决方案2】：

问题是您在该按钮之前包含了脚本

所以它无法检测到它

就是这样:)

--编辑--

将script 标签移动到body 的末尾

【讨论】：

【解决方案3】：

这里有 3 个问题

不要在addEventListener 的第二个参数中调用函数，只需将引用/定义作为callback 传递。 Learn more on callback.
函数调用的案例问题。函数名区分大小写。
脚本执行在 DOM 元素初始化之前，所以firstButton 将具有undefined 值。将您的脚本放在最后可以解决问题。

var firstButton = document.getElementById("EnterButton");

firstButton.addEventListener("click", WelcomeMessage, false);

function WelcomeMessage() {
  alert("Welcome to Irish Ship Wrecks");
}

<div class="container text-center">

  <a href="Conditions.aspx" class="newButton btn" id="EnterButton">

    <span>Enter Irish Wrecks</span>
  </a>

</div>

希望你能理解问题。

【讨论】：