Javascript loop refuses to do a function

My javascript changes the innerHTML, but refuses to add the delay to it. My goal is to make a menu that moves the list items right after each other, but this only works for the first two list items. I used innerHTML so I can see if it touches them. I'm not sure whats not working. I did x[0], x[1].. and so on and it worked. Also another question :D, How can I select all elements with TagName in a certain 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>`