All geek questions in one place

Change the style of all elements with getElementsByTagName ()

I am new to javascript and have not been able to get this code to work, and I'm not sure what it was and what I am missing.

So here is what I want to do. I try to read the script all and switch the visibility of the range 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 "XYZ" it will display "ABC"

The code that I still know.

 $(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 really give some feedback or possible threads that could point me in the right direction.

+4
source share
5 answers

You are using the HTML5 hidden attribute, so you just need to undo this property.

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

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

If you must use a 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 really set it to 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/

+7
source

if your code is fixed:

 $(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 missing ; and } too much

+1
source

I changed my code a bit and now it works.

 <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 hidden attribute, but you are changing the css hidden attribute. I modified your HTML code to set hidden as css property, not HTML property. Also, I switched the if else block and it worked. I think style.visibility is not initialized until you give it meaning. It is null , not visible .

0
source

You have several syntax errors, including an unsurpassed curly brace and a comma in the for for for definition instead of a semi-colony.

Also your html refers to a hidden attribute, but your javascript displays visibility through styles.

Here is the 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; }
-1
source

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

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

Source: https://habr.com/ru/post/1488549/

More articles:


All Articles