Проблемы с обработкой событий JS

Question

У меня есть панель навигации, закодированная в html & css, и я пытаюсь добавить выбранные и отмененные состояния для каждой из кнопок. Я устанавливаю состояние первой кнопки, выбранной в функции window.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>

Но, как я уже добавил, первая кнопка, установленная в функции window.onload, не отменяет выбор, как остальные кнопки, вы должны нажать на первую кнопку, а затем, сделав это, вы можете выбрать ее и отмените выбор в любой момент.

Пожалуйста, вы можете сказать мне, где я иду не так?

Спасибо заранее!

XcodeDev.

Answer 1

Попробуйте инициализировать activeItem первой кнопкой, прежде чем назначить обработчики событий:

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

Answer 2

Создайте свой первый скрипт:

<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 во втором скрипте.