html如何给按钮添加事件

如何控制 HTML 中多个按钮的点击事件，只执行一个按钮的事件函数？

上周有客户问我如何控制网页上多个按钮的点击事件，只执行其中一个按钮的事件功能，而禁用其他按钮。
这个问题实际上很常见，特别是在某种形式的验证或游戏设计中，确实需要这样的功能。
让我详细地向您解释一下。

首先我们需要在 HTML 中定义按钮，如下所示：
<button id="buttonA">按钮A</button> <button id="buttonB">按钮B</button> <button id="buttonC">按钮C</button>
所以，在 JavaScript 中，我们首先通过 getElementById 或 querySelectorAll 来获取这些按钮的 DOM 元素。
我在这里选择使用 getElementById 因为我们示例中的每个按钮都有一个唯一的 ID。

JavaScript const buttonA = document.getElementById('buttonA'); const buttonB = document.getElementById('buttonB'); const buttonC = document.getElementById('buttonC');
接下来，我们需要定义一个函数来禁用其他按钮。
该函数接受当前单击的按钮作为参数。

JavaScript 函数禁用其他按钮（当前按钮）{ const 按钮 = [按钮A，按钮B，按钮C]； 按钮.forEach（按钮=> { if (按钮!==当前按钮) { 按钮.disabled = true; } });
然后，我们将单击事件绑定到每个按钮，并在事件触发时执行我们的函数。

JavaScript buttonA.addEventListener('点击', () => { alert('按钮A事件执行'); 禁用其他按钮（按钮A）； });
buttonB.addEventListener('点击', () => { alert('执行按钮B事件'); 禁用其他按钮（按钮B）； });
buttonC.addEventListener('点击', () => { alert('按钮C事件执行'); 禁用其他按钮（按钮C）； });
这样，每当单击一个按钮时，其他按钮将被禁用，并且仅执行当前按钮的事件函数。

如果您有大量按钮，您可能需要使用更通用的方法。
此时，可以使用querySelectorAll获取所有按钮，然后通过循环绑定事件。

JavaScript const 按钮 = document.querySelectorAll('.action-btn'); 按钮.forEach（按钮=> { button.addEventListener('点击', (e) => { const clickedButton = e.target; console.log(按钮 ${clickedButton.dataset.id} 被点击); 按钮.forEach(btn => { if (btn !== 点击按钮) { btn.disabled = true; } }); }); });
最后，如果您希望用户能够重置按钮的状态，您可以添加一个“重置”按钮，并在单击该按钮时将所有按钮的禁用属性设置为 false。

JavaScript const resetBtn = document.getElementById('resetBtn'); resetBtn.addEventListener('点击', () => { [buttonA，buttonB，buttonC].forEach(btn => btn.disabled = false); });
这样就可以控制多个按钮的点击事件。
请记住，用户体验很重要，因此您可以在 CSS 中调整禁用按钮的外观，例如降低透明度或更改标记样式，以使按钮的状态更清晰。

html按钮button怎么加超链接

不幸的是，这个按钮是一个控制平面对象，地位不低，所以我们不能像添加图像或文本链接一样直接添加它。
我们需要通过按钮单击事件调用脚本并执行此操作。
让我告诉您具体如何使用它。

1 .例如，如果你想在这个页面上转到新的页面，你需要编写这样的代码。
让我举个例子：<button onclick=_window.location.href='http://www.example.com'">打开窗口</button>。
看，按钮上已经添加了onclick属性。
该属性包含调用脚本的代码。

2 该页面显示此按钮，并带有“打开窗口”字样。

3 单击此按钮会将页面转到新页面。

4 如果你想打开一个新的页面来导航，代码会稍微改变一下，例如：<button onclick=window.open('http://www.example.com')">打开窗口</button>。
这使用 window.open 方法打开一个新页面。

5 页面显示类似，具有相同的标记为“打开窗口”的按钮。

6 单击此按钮将打开一个新页面，该新页面也会加载百度。

很简单，按钮和链接就应该这样实现。
当时我不明白，但渐渐地我开始明白了。
老实说，使用这个东西的人越多，它就变得越不复杂。

<大神>js如何实现点击一个按钮隐藏一个div，然后该div上有一个按钮，点击后隐藏，然后在显示另外一个div

结论：使用JS很容易通过单击按钮来显示和隐藏div。

步骤： 1 . 创建一个新索引。
文件。
2 . 添加按钮：<button id="showbutton">显示内容</button>。
3 . 添加隐藏div：。
4 .添加JS代码： JavaScript document.getElementById('showBtn').addEventListener('click', function() { document.getElementById('hiddenDiv').style.display = '块'; });
5 保存后，在Chrome中打开它。

时间：5 分钟。
位置：任何计算机。
数量：1 个按钮，1 个格。

不要用CSS来控制显示和隐藏，JS更直接。