javascript - Cannot set property 'display' of undefined

Question

I'm writting script to hide/show menu but I get some troubles.

    function displayMenu() {
//var classMenu = event.target.className;
//classMenu += 'Menu';
    //document.getElementsByClassName(classMenu).style.display = 'block';
document.getElementsByClassName('btn-pageMenu').style.display = 'block';
    }

In comment what I want to do finally, but even if I try with static var it's not working. In the CSS :

    fieldset.toolsbox ul.btn-pageMenu {display:none;}

I try like this too :

    .btn-pageMenu {display:none;}

No more success. Anybody have a suggestion ? I'm learning JS and I not finding errors when I compare with other similar scripts.

Thanks for your help :)

Answer 1

document.getElementsByClassName('btn-pageMenu') delivers a nodeList. You should use: document.getElementsByClassName('btn-pageMenu')[0].style.display (if it's the first element from that list you want to change.

If you want to change style.display for all nodes loop through the list:

var elems = document.getElementsByClassName('btn-pageMenu');
for (var i=0;i<elems.length;i+=1){
  elems[i].style.display = 'block';
}

to be complete: if you use jquery it is as simple as:

?$('.btn-pageMenu').css('display'???????????????????????????,'block');??????