using an element from an array of element collection in javascript

Question

The value of u and v are coming correctly as 1 and 0... but the values are not being used in the statement "t[i].children[v].onclick=function(){}" ..!! This works perfectly when I used 1 in the place of u and 0 in the place of v!!! Here is the code :

    <div class="dropdown">
    <span class="menu-toggler">Menu</span>
    <ul class="dropdown-menu">
    <li>First Part</li>
    <li>Second Part</li>
    </ul>
</div>



<script type="text/javascript">

function init()
{
    t = document.getElementsByClassName("dropdown");
    for(i=0;i<t.length;i++)
    {
        v = getMenuToggler(t[i]); // v is becoming 0 correctly
        u = getDropDown(t[i]); // u is becoming 1 correctly
 // the next statement is not working properly!!!
        t[i].children[v].onclick=function(){if(this.parentNode.children[u].classList.contains("menu-

open")){this.parentNode.children[u].classList.remove("menu-open");}else{this.parentNode.children

[u].classList.add("menu-open");}}
    }
}

function getDropDown(x) // this function is all right... u can ignore this
{
    for(i=0;i<x.childElementCount;i++)
    {
        if(x.children[i].classList.contains("dropdown-menu"))
        return i;
    }
    return -1;
}

function getMenuToggler(y) //this function is all right... u can ignore this
{
    for(i=0;i<y.childElementCount;i++)
    {
        if(y.children[i].classList.contains("menu-toggler"))
        return i;
    }
    return -1;
}
</script>
<script>window.onload=init;</script>

thank you in advance... :)

Answer 1

window.onload=init();

If you write it like this then init is immediately called instead of the function assigned as an event listener.

What you want is:

window.onload=init;

Or in a more standardized and modern way:

window.addEventListener('load',init);

If you call init too early by mistake like in your original code then the DOM hasn’t loaded yet so you can’t get any elements.

Now in your assigned function to the onclick property t[i] won’t be defined when you write t[i].children[1].

Because the function is assigned to the onclick property of t[i].children[0] you can replace t[i].children[1] by this.parentNode.children[1] which will be equivalent.

Answer 2

<div class="dropdown" onclick="add_class(this)">
    <span>Menu</span>
    <ul>
        <li>First Part</li>
        <li>Second Part</li>
    </ul>
</div>
    <script>

    function add_class(dropdown) {
      dropdown.getElementsByTagName("ul")[0].className = (dropdown.getElementsByTagName("ul")[0].className == "menu-open") ? "" : "menu-open";
   }
    </script> 

Answer 3

There are 1 flaws in your code

1. you are not calling the function from anywhere , it is just declared, so i called from ul when clicked .
   • so there is no need to call this line t[i].onclick ,
   • my code is adding class menu-open to the element ul.

DEMO : http://jsfiddle.net/yosrknv3/1/

    <div class="dropdown">
        <span>Menu</span>
        <ul onclick="init_menu()">
            <li >First Part</li>
            <li>Second Part</li>
            </ul>
        </div>
<script>
    function init_menu()
    {
            t=document.getElementsByClassName("dropdown");                                for(i=0;i<t.length;i++)
            {
                 console.log("i am clicked"+t[i],t[i].children[1]);
                 t[i].children[1].classList.add("menu-open");
            }
   }
</script>