Javascript loop refuses to do a function

Question

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>`

Did you ever check what the value of delay is? You add a string to a number. — t.niese
– t.niese, Commented Jul 31, 2014 at 19:46
Regarding your final question, something like: document.getElementById('myid').getElementsByTagName('LI') should be what you're after — MDEV
– MDEV, Commented Jul 31, 2014 at 19:48
@SmokeyPHP correct me if I'm wrong, but isn't that what classes are for? IDs are for single elements, so the OP's final question doesn't make much sense. — Jason
– Jason, Commented Jul 31, 2014 at 19:51
@Jason I've taken it to mean LI elements under a single element with an ID, which is what my code snippet looks for. Indeed, IDs shouldn't be being used on multiple elements. — MDEV
– MDEV, Commented Jul 31, 2014 at 19:52

Jon TJ · Accepted Answer · 2014-07-31 19:47:16Z

5

try

delay = delay + 0.1;

without using "" as this makes it a string, therefore it will not behave as a number and increment the number by 0.1, it will start becoming 00.10.10.10.1 etc

in answer to

How can I select all elements with TagName in a certain ID?

use JQuery:

$('tagname#some_id')

or

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

answered Jul 31, 2014 at 19:47

Jon TJ

1451 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jason Over a year ago

Better yet, just do delay += 0.1;.

Jon TJ Over a year ago

yup that'll do it too :)

MDEV Over a year ago

I'd just like to point out that if the project doesn't already use jQuery, including it just to select an LI or multiple LIs is ridiculous

Collectives™ on Stack Overflow

Javascript loop refuses to do a function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related