事件处理问题JS

Event handling trouble JS

本文关键字：JS 处理问题 事件      更新时间：2023-09-26

我有一个用html &css，我正在尝试为每个按钮添加选中和取消选中的状态。我正在设置窗口中选择的第一个按钮的状态。像这样Onload函数:

<script type="text/javascript">
    window.onload = function() {
        var nav = document.getElementById('textContainer');
        var navItems = nav.getElementsByTagName('a');
        var item = navItems[0];
        item.style.color = "#696969";                       
};

</script>

然后在另一个函数中添加事件处理程序，以便可以选择和取消选择按钮:

<script type="text/javascript">
    var nav = document.getElementById('textContainer');
    var activeItem = null;
    var navItems = nav.getElementsByTagName('a');
    for (var i = 0; i < navItems.length; i++) {
        navItems[i].addEventListener('click', 
        function() {
            if (activeItem) {
                activeItem.style.color = "#b3b3b3"; 
            }
            this.style.color = "#696969";
            activeItem = this;
            //alert(activeItem.innerText);
        }, false);
    }
</script>

但是我已经添加了这个，第一个按钮，设置在窗口中。Onload功能，不像其他按钮那样取消选择，你必须点击第一个按钮，然后完成后，你可以在任何时候选择和取消选择它。

你能告诉我我哪里做错了吗?

提前感谢!

XcodeDev .

在分配事件处理程序之前，尝试用第一个按钮初始化activeItem:

var navItems = nav.getElementsByTagName('a');
var activeItem = navItems[0];

制作第一个脚本:

<script type="text/javascript">
    var activeItem = null;
    window.onload = function() {
            var nav = document.getElementById('textContainer');
            var navItems = nav.getElementsByTagName('a');
            var item = navItems[0];
            activeItem = item;
            item.style.color = "#696969";
    };

</script>

然后不要在第二个脚本中重新声明activeItem

相关文章：