All geek questions in one place

JS: hide some elements with getElementsByClassName

I am trying to set up a script that sets invisible everything with a specific class name. This is an example of what I am trying to name:

<script type="text/javascript"> function hideItems(){ document.getElementsByClassName('class1').style.visibility = "hidden"; } </script>

Class names refer to table sizes similar to this example:

 <table onclick="hideItems()" width="200" border="1"> <tr> <td class="class1">1</td> <td class="class2">2</td> <td class="class3">3</td> <td class="class1">1</td> <td class="class2">2</td> <td class="class3">3</td> </tr> <tr> <td class="class3">3</td> <td class="class1">1</td> <td class="class2">2</td> <td class="class3">3</td> <td class="class1">1</td> <td class="class2">2</td> </tr> </table>

In the end, there will be three flags displaying sizes based on which of the three is selected. This part, I can do everything well, but to call on specific measurements to become invisible is what I have a problem with right now.

Thanks in advance for any help.

+4
source share
2 answers

getElementsByClassName returns the collection. You cannot set properties collectively unless you use a framework like jquery

 var elems = document.getElementsByClassName('class1'); for(var i = 0; i != elems.length; ++i) { elems[i].style.visibility = "hidden"; // hidden has to be a string }
+14
source

I tried this, but without success.

 <div class="subManuSched'.$data2->AUNR.'"> <div class="subManuSched'.$data2->AUNR.'"> <div class="subManuSched'.$data2->AUNR.'"> document.getElementsByClassName('subManuSched'+counter)[0].style.visibility = 'hidden';

I want to hide multiple divs with the same class name. With the mentioned Code, I do not get an error, but nothing happens either. $ data2-> AUNR is the given parameter of the JS function, called there "counter".

What's wrong? How can I debug?

0
source

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

More articles:


All Articles