如何使我的按钮与我的功能交互答案

【问题标题】：How to interact my button with my function如何使我的按钮与我的功能交互
【发布时间】：2023-03-18 00:02:01
【问题描述】：

我是 JavaScript 的初学者，我试图点击一个按钮，我必须显示一条警告消息。我的按钮没有交互？

我的 HTML 是：

<body>
   <h1>Test</h1>
   <button id='b1'>Click on button</button>
</body>

我的问题在于 Javascript

function myFunction(){
    ???? = document.getElementById('b1');
    alert('Hello');
}

【问题讨论】：

这是一个 JavaScript 教程的问题，而不是 SO。您应该能够通过任何体面的搜索提供商或Mozilla Developer Network 找到答案
在 w3schools 上有一个直接的例子：w3schools.com/js/tryit.asp?filename=tryjs_alert
这能回答你的问题吗？ JavaScript adding an onclick event to a element
@ControlAltDel 看在上帝的份上，请不要提及 W3 学校。众所周知，您共享的链接信息不完整、不准确或过时，但仍建议使用内联 HTML 事件属性，例如 2020 年的 onclick、which should not be used。
@ControlAltDel 但是关于 W3 学校，为什么要访问一个不完整、不准确或过时的网站，而您可以访问 Mozilla Dev。网络，仍然可以获得所有这些信息，但来自权威来源？在那里学习同样容易。没有理由使用 W3 Schools。而且，在onXyz 属性上，也没有没有理由了解它们，因为它们不应该再使用了。我们仍然看到这么多人使用它们的原因是因为有这么多人让这些可憎的东西活着。让他们死。 ;)

标签： javascript

【解决方案1】：

要在用户单击时发生某些事情，您必须向相关元素添加事件处理程序（或回调函数）。这是通过元素的.addEventListener() 方法完成的：

// Get a reference to the button
let btn = document.getElementById("b1");

// Add an event handler for the click event
btn.addEventListener("click", myFunction);

function myFunction(){
    alert('Hello');
}

&lt;button id='b1'&gt;Click on button&lt;/button&gt;

仅供参考：有一种更古老的方法，您今天仍然会看到人们使用它，因为他们不完全了解事件处理程序的工作原理。这种方式使用 HTML 中的嵌入事件属性，例如 onclick。 Do not use these!

【讨论】：

感谢您的代码有效，但在我的 IDE 上，什么都没有发生？
JavaScript 必须放在 HTML 的末尾，就在结束 body 标记之前，这样在遇到它时，HTML 按钮就会被解析到内存中。
谢谢斯科特！ ;-)