用排他思想实现页面中存在多个按钮且按钮文本为”嘿嘿”,点击某个按钮,则被点击的按钮显示“哈哈”。
时间: 2024-05-10 16:14:39 浏览: 13
在 HTML 中,我们可以为每个按钮设置一个唯一的 ID 属性,然后在 JavaScript 中,通过获取按钮元素的 ID 属性来判断哪个按钮被点击了。实现代码如下:
HTML 代码:
```html
<button id="btn1">嘿嘿</button>
<button id="btn2">嘿嘿</button>
<button id="btn3">嘿嘿</button>
```
JavaScript 代码:
```javascript
var buttons = document.querySelectorAll('button'); // 获取页面中所有的按钮元素
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
if (this.innerHTML === '嘿嘿') { // 判断被点击的按钮是否为“嘿嘿”
for (var j = 0; j < buttons.length; j++) {
buttons[j].innerHTML = '嘿嘿'; // 将所有按钮的文本重置为“嘿嘿”
}
this.innerHTML = '哈哈'; // 将被点击的按钮的文本设置为“哈哈”
}
});
}
```
在上述代码中,我们使用了一个循环来添加每个按钮的点击事件。当一个按钮被点击时,首先判断它的文本是否为“嘿嘿”,如果是,则循环遍历所有按钮,将它们的文本都重置为“嘿嘿”,然后将被点击的按钮的文本设置为“哈哈”。这样就能实现页面中存在多个按钮且按钮文本为“嘿嘿”,点击某个按钮,则被点击的按钮显示“哈哈”的效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)