CODEWITHSUNDEEP
javascripthtmlevent-handlingonclick
John Stiks
John Stiks

Reputation: 163

the onclick event is not set

function main() {
    workMenu("leftVerticalMenu");
}

function log(obj) {
    console.log(obj);
}

function workMenu(id) {
    var menuContainer = document.getElementById(id).children[0];
    closeListsNodes(menuContainer);
}

function closeListsNodes(container) {
    var object = container.getElementsByTagName("li");

    for (var i = 0; i < object.length; i++) {
        var need = object[i].getElementsByTagName("ul");

        for (var j = 0; j < need.length; j++) {
            need[j].style.display = "none";
            need[j].id = i.toString() + j.toString();
            need[j].onclick = function () {
                hideshow(need[j].id);
            };
        }
    }
}

function hideshow(id) {
    var need = document.getElementById(id);

    if (need.style.display == 'none') {
        need.style.display = 'block';
    } else {
        need.style.display = 'none';
    }

}

This code creates a list in a minimized mode and enters IDs. But the code don't add onclick event handlers to html page. I'm tried to use code examples, but not working. How to realize it without using jQuery ?

<body onload="main();">
    <div id="leftVerticalMenu">
        <ul>
            <li>
                <a href="#">item 1</a>
                <ul>
                    <li>
                        <a href="#">item 11</a>
                        <ul>
                            <li>
                                <a href="#">item 111</a>
                            </li>
                            <li>
                                <a href="#">item 112</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">item 12</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">item 2</a>
                <ul>
                    <li>
                        <a href="#">item 21</a>
                    </li>
                    <li>
                        <a href="#">item 22</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

Upvotes: 3

Views: 468

Answers (3)

Stano
Stano

Reputation: 8949

This solution uses only one loop. If the list item <li> element contains no children <ul> list, it stops event propagation and prevents collapsing already expanded menu (now it's also IE8/7 compatible):

function closeListsNodes(container) {
    var object = container.getElementsByTagName("li");
    for (var i = 0; i < object.length; i++) {
        var need = object[i].getElementsByTagName("ul")[0];
        if (need === undefined) {
            object[i].onclick = function(e){
                e = e||window.event;
                if (e.stopPropagation) {
                    e.stopPropagation();
                } else {
                    e.cancelBubble = true; // for IE8/7 compatibility, http://blog.patricktresp.de/2012/02/internet-explorer-8-and-all-the-fun-stuff-e-stoppropagation-e-preventdefault-mousedown/
                }
            }
            continue;
        }
        need.style.display = "none";
        need.id = 'list'+i;
        object[i].onclick = (function (need) {
            return function(e){
                hideshow(need.id,e);
            };
        })(need); // create closure here to remember/pass the correct element to hideshow()
    }
}

function hideshow(id, e) {
    e = e||window.event; // for IE8/7
    var need = document.getElementById(id);
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true; // for IE8/7
    }
    if (need.style.display == 'none') {
        need.style.display = 'block';
    } else {
        need.style.display = 'none';
    }
}

http://jsfiddle.net/krTXh/4/ (code)
http://jsfiddle.net/krTXh/4/show (result)

Upvotes: 1

Steven10172
Steven10172

Reputation: 2013

Try the following:

if (el.addEventListener) {
  need[j].addEventListener('click', function() {hideshow(need[j].id);}, false);  //IE9+ and other browsers
} else if (el.attachEvent)  {
  need[j].attachEvent('onclick', function() {hideshow(need[j].id);}); //earlier than IE 9
}

Upvotes: 1

Amit
Amit

Reputation: 15387

Try this

function closeListsNodes(container) {
    var object = container.getElementsByTagName("li");

    for (var i = 0; i < object.length; i++) {
        var need = object[i].getElementsByTagName("ul");

        for (var j = 0; j < need.length; j++) {
            need[j].style.display = "none";
            need[j].id = i.toString() + j.toString();
            need[j].onclick = function() {
                hideshow(need[j].id);
            };
        }
    }
}

or you can replace onclick as 

 need[j].addEventListener('click', function (){hideshow(need[j].id);});

Upvotes: 1

Related Questions