Loop JavaScript si rifiuta di fare una funzione

Question

Il mio JavaScript cambia l'INNERHTML, ma si rifiuta di aggiungere il ritardo ad esso.Il mio obiettivo è creare un menu che sposta gli elementi dell'elenco subito l'uno dopo l'un l'altro, ma questo funziona solo per i primi due elementi di elenco.Ho usato innerhtml così posso vedere se li tocca.Non sono sicuro che cosa non funziona.Ho fatto x [0], x [1] .. E così via e ha funzionato.Anche un'altra domanda: D, come posso selezionare tutti gli elementi con taggame in un determinato ID?

js:

    var x = document.getElementsByTagName("LI");
    var delay = 0;
        for (i=0; i<=x.length; i++){

            x[i].style.padding = "0 0 0px 20px";
            x[i].style.transition = "1s " + delay +"s !important"
            x[i].innerHTML = "Changed";
            delay += "0.1";
        }

.

HTML:

       <header class = "mainHeader">
            <nav>
                <ul id = "mainNav">
                    <li id = "search"><img src = "img.png"><input type = "text" placeHolder = "" id = "search"></li>
                    <li><a href ="#">HOME</a></li>
                    <li><a href ="#">ABOUT</a></li>
                    <li><a href = "#">PHOTOGRAPHY</a></li>
                    <li><a href ="#">PROJECTS</a></li>
                    <li><a href ="#">CONTACT</a></li>

                </ul>
            </nav>
    </header>`

.

Answer 1

Prova

delay = delay + 0.1;

.

Senza usare "" in quanto ciò lo rende una stringa, quindi non si comporterà come un numero e incrementa il numero di 0.1, inizierà a diventare 00.10.10.10.1 etc

In risposta a

.

Come posso selezionare tutti gli elementi con taggame in un determinato ID?

Usa JQuery:

$('tagname#some_id')

.

o

$('tagname[id="some_id"]')

.