Изменить стиль некоторых элементов в цикле

Question

у меня есть этот navBar в верхней части страницы макета:

<div id="myTopnav" class="topnav" style="background-color: #030005; background-image: linear-gradient(#270133,#F5F5F5)">
            <a href="#" class="active ">@Session["UserName"].ToString() @Session["UserApe"].ToString()</a>
            <a href="#">Testing A</a>
            <a href="#">Testenado B</a>
            <a href="/Home/Logout">Cerrar Sesion</a>
            <a href="javascript:void(0);" class="icon" onclick="despMenu()"><i class="fa fa-bars"></i></a>
        </div>

Идея состоит в том, чтобы переключать градиент на каждой кнопке, и я пришел к этому:

window.addEventListener("load",inicializarEventos,false);
function inicializarEventos() {
    var ob1 = document.getElementById("myTopnav");
    var lista = ob1.getElementsByTagName("a");    
    var sw = 1;
    for (var i = 0; i < (lista.length - 1); i++) {
        if (sw == 1) {
            ob1.item(i).style.backgroundImage="linear-gradient(to top ,#270133,#F5F5F5)";            
            sw = 0;
            console.log("Entro a 1")
            break;
        }
        else {
            ob1.item(i).style.backgroundImage = "linear-gradient(to top ,#F5F5F5,#270133)";
            sw = 1;
            console.log("Entro a 2")
             }
      }
}

Однако это не работает.Что я делаю неправильно?Есть ли лучший способ сделать это?

Answer 1

Ваш рабочий пример должен выглядеть следующим образом:

window.addEventListener("load",inicializarEventos,false);
function inicializarEventos() {
    var ob1 = document.getElementById("myTopnav");
    var lista = ob1.getElementsByTagName("a");    
    var sw = 1;
    for (var i = 0; i  < lista.length; i++) {
        if (sw == 1) {
            lista[i].style.backgroundImage="linear-gradient(to top ,#270133,#F5F5F5)";            
            sw = 0;
            console.log("Entro a 1")
            break;
        }
        else {
            lista[i].style.backgroundImage = "linear-gradient(to top ,#F5F5F5,#270133)";
            sw = 1;
            console.log("Entro a 2")
             }
      }
}

Как упоминалось выше, вы должны использовать lista[i] для доступа к текущему объекту, а также вы должны проверить весь список, если нет ограничений i < lista.length