在JavaScript编程中，有时我们需要实现一个功能，使得用户点击按钮后，按钮的显示文字会发生变化。这在交互式用户界面中十分常见，可以提供更好的用户体验。本教程将详细讲解如何利用JavaScript来实现这样一个功能，即当点击某个按钮时，该按钮的文本变为“点了”，而其他未被点击的按钮文本则变为“没点”。
我们来看一下实现这个功能的基本思路。我们需要遍历页面上所有的按钮元素，并为它们添加点击事件监听器。当按钮被点击时，我们需要区分当前被点击的按钮和其他按钮，然后分别改变它们的文本内容。
以下是一个实现此功能的HTML和JavaScript代码示例：
```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>显示一些按钮，如果点击了， 当前点击的按钮文本变为“点了”，其他按钮文本变为“没点”</title>
<script type="text/javascript">
// 为所有按钮动态添加事件
function IniButtonEvent() {
var Items = document.getElementsByTagName("input");
for (var i = 0; i < Items.length; i++) {
var objTmp = Items[i];
if (objTmp.type == "button") {
objTmp.onclick = ButtonClick;
}
}
}
function ButtonClick() {
var Items = document.getElementsByTagName("input");
for (var i = 0; i < Items.length; i++) {
var objTmp = Items[i];
if (objTmp.type == "button") {
// 判断是否是按钮
// window.event.srcElement 触发当前事件的元素
// 用来判断是否是当前单击的按钮
if (objTmp == window.event.srcElement) {
objTmp.value = "点了";
} else {
objTmp.value = "没点";
}
}
}
}
</script>
</head>
<body onload="IniButtonEvent()">
显示一些按钮，如果点击了，当前点击的按钮文本变为“点了”，其他按钮文本变为“没点”
<br />
<input type="button" value="没点" />
<input type="button" value="没点" />
<input type="button" value="没点" />
<input type="button" value="没点" />
<input type="button" value="没点" />
</body>
</html>
```
在这个例子中，`IniButtonEvent`函数用于遍历页面上的所有`input`元素，并检查它们的类型是否为`button`。如果是，就将它们的`onclick`事件绑定到`ButtonClick`函数。`ButtonClick`函数则是核心部分，它再次遍历所有按钮，通过比较`window.event.srcElement`（表示当前触发事件的元素）和当前迭代的按钮元素，来区分当前被点击的按钮和其他按钮。然后，根据这个判断结果来改变按钮的文本值。
这段代码演示了一个简单的JavaScript事件处理机制，包括事件监听器的添加和事件处理函数的执行。此外，它还展示了如何通过DOM操作来修改网页元素的属性，如改变按钮的文本内容。这种技术在创建动态网页时非常常见，尤其是在没有使用现代前端框架的情况下。
理解并掌握这样的JavaScript交互逻辑对于开发动态、响应式的网页至关重要。无论是在简单的网页应用还是复杂的Web项目中，这种点击事件处理和DOM操作的技巧都是基础且实用的。希望这个教程能帮助你更好地理解和运用JavaScript来实现类似的功能。
2301_803203932024-07-05资源内容总结地很全面，值得借鉴，对我来说很有用，解决了我的燃眉之急。
