javascript 案例,显示一些按钮，如果点击了，当前点击的按钮文本变为“点了”，其他按钮文本变为“没点”

最新推荐文章于 2022-03-19 11:50:20 发布

翻译最新推荐文章于 2022-03-19 11:50:20 发布 · 2k 阅读

Javascript 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，该示例中包含了多个初始状态为“没点”的按钮。通过JavaScript实现了当点击任意一个按钮时，被点击的按钮文字会变为“点了”，而其他未被点击的按钮文字则变为“没点”。此功能通过遍历获取页面上的所有按钮并为它们添加点击事件来实现。

<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>