Showing hiding multiple href elements using javascript

Question

Here I'm attempting to hide multiple href element using pure javascript :

document.getElementById('test').onmouseover = function() {  document.getElementsByClassName('dropDown').setAttribute(
    "style", "display:block;");
                                                        } 
document.getElementsByClassName('dropDown').onmouseout = function() { document.getElementsByClassName('dropDown').setAttribute(
    "style", "display:none;");
                                                        } 

.hideDropDown {
   z-index:9999; 
    display:none; 
    position: absolute; 
    background-color:red
}

.displayDropDown {
   z-index:9999; 
    display:block; 
    position: absolute; 
    background-color:red
}

document.getElementById('test').onmouseover = function() {  document.getElementsByClassName('dropDown').setAttribute(
    "style", "display:block;");
                                                        } 
document.getElementsByClassName('dropDown').onmouseout = function() { document.getElementsByClassName('dropDown').setAttribute(
    "style", "display:none;");
                                                        } 

http://jsfiddle.net/w55yubtc/24/

But error Uncaught TypeError: document.getElementsByClassName(...).setAttribute is not a function is being thrown. How to set the styles of multiple elements using pure javascript? In this case hide/display href elements ?

Answer 1

document.getElementsByClassName(...) delivers a NodeList , an array-like object. If you want to use .setAttribute , you have to loop through it:

for (var i=0; i < myNodelist.length; i+=1) {
  myNodelist[i].setAttribute( ... );
}

anyway, you can solve this using no scripting at all :

 .dropDown { background-color: yellow; margin-top: 0.5em; display: none; } li[data-hover]:hover > .dropDown { display: inline-block; } 

 <li data-hover="true"> <a id="test" href="www.google.com">Hello</a> <br> <a class="dropDown" href="www.google.com">Hello</a> <a class="dropDown" href="www.google.com">Hello2</a> </li> 

Answer 2

Another approach would be to use querySelectorAll and CSS classes rather than the style attribute. The advantage of querySelectorAll is you have more control than just the class, using CSS classes avoids collisions with direct access to the style attribute.

var hideList = document.querySelectorAll("a.test, a.dropDown");
var i;
for (i = 0; i < hideList.length; i++) {
    if (hideList[i].className.indexOf("hidden") === -1) {
        hideList[i].className += " hidden";
    }
}

Answer 3

document.getElementById('test').onmouseover = function () {
    var els = document.getElementsByClassName('dropDown');
    for (var i = 0; i < els.length; i++) {
        els[i].setAttribute("style", "display:block;");
    }
}

document.getElementsByClassName('dropDown')[1].onmouseout = function () {
    var els = document.getElementsByClassName('dropDown');
    for (var i = 0; i < els.length; i++) {
        els[i].setAttribute("style", "display:none;");
    }
}

JSFiddle

PS This solution is for this question only, there are better solutions to this approach (like css only)