CODEWITHSUNDEEP
javascriptjquery
Ash
Ash

Reputation: 183

getElementsByClassName doesn't work

I try to hide some HTML elements onload and then show and manipulate them. The code works fine when I use element's individual IDs with getElementById() method. But when I try to do it more efficiently using the classes, it doesn't work. Here is the code:

<!DOCTYPE html>
<html>    
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
</head>

<body onload="HideModals()">
    <p id="p1" class="MyModal99">1. I will disappear or not.</p>
    <p id="p2" class="MyModal99">2. I will disappear or not.</p>
    <button id="toggle">Toggle</button>
    <button id="hide">Hide</button>

    <script>
    $(document).ready(function(){
        $("#toggle").click(function(){
            $("#p1").toggle();
        });

        $("#hide").click(function(){
            $("#p2").hide();
        });
    });
    </script> 

    <script>
    function HideModals() {
        //document.getElementById("p1").style.display = 'none';
        //document.getElementById("p2").style.display = 'none';
        document.getElementsByClassName("MyModal99").style.display = 'none';
    }    
    </script>
</body>
</html>

Upvotes: 1

Views: 3048

Answers (7)

Ash
Ash

Reputation: 183

I had difficulties with this code because I didn't know how to name jQuery functions. Now i know. Here is the corrected code:

<!DOCTYPE html>
<html>    
<head>
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script>
</head>
<body onload="HideModals()">
<p id="p1" class="MyModal99">1. I will disappear or not.</p>
<p id="p2" class="MyModal99">2. I will disappear or not.</p>
<button id="toggle">Toggle</button>
<button id="hide">Hide</button>
<script>
    $(document).ready(function(){
    $("#toggle").click(function(){
    $("#p1").toggle(100);
    });
    $("#hide").click(function(){
    $("#p2").hide(100);
    });
    });
    function HideModals() {
        $('.MyModal99').css('display', 'none');
    }    
</script>

Upvotes: 0

Bryan Miller
Bryan Miller

Reputation: 3323

You can use a for loop to cycle through all of the elements in the collection returned by getElementsByClassName like this:

var results = document.getElementsByClassName("MyModal99");
for (var i = 0; i < results.length; i++) {
    results[i].style.display = 'none';
}

working demo: http://jsfiddle.net/gratiafide/3qg308bq/2/

Upvotes: 1

dsan
dsan

Reputation: 1578

Thats because document.getElementsByClassName returns an array of nodes. You need to iterate each of the returned nodes to set their styles individually.

var eleArray = document.getElementsByClassName('MyModal99');

for(var i = 0; i < eleArray.length; i++) {
    eleArray[i].style.display = 'none';
}

Upvotes: 1

jaggedsoft
jaggedsoft

Reputation: 4038

The issue here is that document.getElementsByClassName("MyModal99") returns a list of items, so you'd have to loop through them and apply your properties one at a time. Something like this:

var elements = document.getElementsByClassName("MyModal99");
for ( var e in elements ) {
    e.style.display = "none";
}

If you need to support older browsers, do it the old fashioned way without a for..in loop:

var elements = document.getElementsByClassName("MyModal99");
for ( var i = 0 ; i < elements.length ; ++i ) {
    elements[i].style.display = "none";
}

Upvotes: 1

TAGraves
TAGraves

Reputation: 1409

document.getElementsByClassName returns an array, which doesn't have a "style" property. You need to iterate over the array:

    function HideModals() {
        //document.getElementById("p1").style.display = 'none';
        //document.getElementById("p2").style.display = 'none';
        var modals = document.getElementsByClassName("MyModal99");
        for (var i=0; i < modals.length; i++) {
            modals[i].style.display = 'none';
        }
    }

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240888

It's because getElementsByClassName() returns an array-like object of elements. You need to access a specific element in order to change the style object.

You could iterate over the elements:

var elements = document.getElementsByClassName("MyModal99");
Array.prototype.forEach.call(elements, function (el) {
  el.style.display = 'none';
});

or:

var elements = document.getElementsByClassName("MyModal99");
for (var i = 0; i < elements.length; i++) {
  elements[i].style.display = 'none';
}

Upvotes: 1

Leah Zorychta
Leah Zorychta

Reputation: 13409

You cannot apply properties in bulk like that. This is why using jQuery is preferred for things like this:

$('.MyModal99').css('display', 'none');

If you want to do this without jQuery:

var nodes = document.getElementsByClassName("MyModal99");
for(var i = 0; i < nodes.length; i++) {
  nodes[i].style.display = 'none';
}

Upvotes: 2

Related Questions