JS: Making certain elements hidden via getElementsByClassName

Kage the Klown picture Kage the Klown · Nov 13, 2012 · Viewed 11k times · Source

I'm trying to set up a script that sets invisible everything with a certain class name. This is an example of what I'm trying to call:

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

The class names are on the dimensions of a table, 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's going to be a three checkboxes, displaying the dimensions based on which of the three are selected. That part, I can do just fine, but calling the particular dimensions to become invisible is what I'm having an issue with currently.

Thanks in advance for any kind of help.

Answer

Eli Gassert picture Eli Gassert · Nov 13, 2012

getElementsByClassName returns a collection. You can't collectively set properties unless you're using a framwork 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
}