Change style of all elements using getElementsByTagName()

Question

I'm fairly new to javascript and have been unable to get this code to work and I am unsure were and what I'm missing.

So here is what I want it to do. I'm trying to have the script read everything and switch the visibility of the span found in the body

<body> 
   <span hidden>A</span>     
   <span>X</span>
   <span hidden>B</span>
   <span>Y</span>
   <span hidden>C</span>
   <span>Z</span>
</body>

So instead of reading 'X Y Z' it will display 'A B C'

The code I have so far is..

$(function() {

    var elems = document.getElementsByTagName('span');

    for (var i = 0; i<elems.length; i++) {
        if (elems[i].style.visibility == 'visible') {
            elems[i].style.visibility = 'hidden';    
        }
        else {
            elems[i].style.visibility = 'visible';
        }
    }

});

Here is the jsfiddle of my code. I would greatly appropriate some feedback or possible threads that might point me in the right direction.

You spelled `visible` wrong in your jsFiddle, and you have too many `}` in your jsFiddle — Ian, Jun 27 '13 at 17:10
sorry bout that copied over the wrong jsFiddle edit somehow. should be what I was working on now — pancakes, Jun 27 '13 at 17:19

score 16 · Accepted Answer · 2013-06-27T17:13:25.860

You're using the HTML5 hidden attribute, so you should just reverse that property.

for (var i = 0; i<elems.length; i++) {
    elems[i].hidden = !elems[i].hidden;
}

DEMO: http://jsfiddle.net/TEXJp/

If you were to use the style object, then you need to consider that it will only report styles that were set directly on the element. So your test should be for == "" instead of == "visible", or for == "hidden" if you actually set it on the original elements.

<span style="visibility:hidden;">H</span>   
<span>V</span>

<span style="visibility:hidden;">H</span>
<span>V</span>

var elems = document.getElementsByTagName('span');

for (var i = 0; i < elems.length; i++) {
    if (elems[i].style.visibility === "hidden") {
        elems[i].style.visibility = "visible";
    } else {
        elems[i].style.visibility = "hidden";
    }
}

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

Thank You, that answered it perfectly. Was not expecting an answer so quickly. You even managed to grab the first jsFiddle before I noticed it was setup wrong. That must have been almost a minute after I posted. — pancakes, Jun 27 '13 at 17:29

score 2 · Answer 2 · edited Nov 01 '13 at 15:35

2

if fixed your code:

$(function () {


    var elems = document.getElementsByTagName('span');

    for (var i = 0; i < elems.length; i++) {
        if (elems[i].style.visibility == 'hidden') {
            elems[i].style.visibility = 'visibile';
        } else {
            elems[i].style.visibility = 'hidden';
        }
    }

});

It was just a missing ; and a } too much

edited Nov 01 '13 at 15:35

user229044

232,980
40
330
338

answered Jun 27 '13 at 17:09

raptor

760
7
18

score 0 · Answer 3 · answered Jun 27 '13 at 17:18

I changed your code a little bit and now it seems to work.

<body> 
   <span style="visibility: hidden;">A</span>     
   <span>X</span>
   <span style="visibility: hidden;">B</span>
   <span>Y</span>
   <span style="visibility: hidden;">C</span>
   <span>Z</span>
</body>

$(function() {

    var elems = document.getElementsByTagName('span');

    for (var i = 0; i<elems.length; i++) {
        if (elems[i].style.visibility == 'hidden') {
            elems[i].style.visibility = 'visible';    
        }
        else {
            elems[i].style.visibility = 'hidden';
        }
    }

});

The problem is that you are using the html attribute hidden, but you are modifying the css attribute hidden. I changed your HTML code to set hidden as a css property instead of a HTML property. Also, I switched your if else block and it worked. I think the style.visibility is not initialized until you give it a value. It equals null, not visible.

score -1 · Answer 4 · answered Jun 27 '13 at 17:14

You have a few syntax errors, including an unmatched curly brace, and a comma in your for loop definition instead of a semi-colon.

Also your html refers to the hidden attribute, yet your javascript is flipping the visibility via styles.

Here is a working fork. http://jsfiddle.net/yPU2T/1/

var elems = document.getElementsByTagName('span');

for (var i = 0; i < elems.length; i++) {
    elems[i].hidden = !elems[i].hidden;
}

score -3 · Answer 5 · answered Jun 27 '13 at 17:12

-3

You are using jquery, so no need to get elements the way you did it

    $(document).ready(function () {
    var elems = $('span.hidden');
    elems.hide();


})

answered Jun 27 '13 at 17:12

Euphe

3,531
6
39
69

Change style of all elements using getElementsByTagName()

5 Answers5

Linked