Trying to toggle visibility of classes with buttons (using Javascript), absolutely nothing works, what am I missing?

Question

I want to set up a page where the visibility of certain elements on a page are toggled by buttons, but for some reason, my code is simply ignored / does absolutely nothing.

I can get this to work when using ID's, but then only the first instance of the ID on the page gets changed while the rest are ignored. With classes, nothing happens.

I'm sure I'm missing something basic here, but I can't figure out what. Please check below:

function georgianInfo() {
  document.getElementByClassName("georgian").style.display = "block";
  document.getElementByClassName("international").style.display = "none";
}

function internationalInfo() {
  document.getElementByClassName("georgian").style.display = "none";
  document.getElementByClassName("international").style.display = "block";
}

.georgian {
  display: none;
}

.international {
  display: block;
}

<form><input type="button" onClick="georgianInfo()" value="georgian students"></form>

<form><input type="button" onClick="internationalInfo()" value="international students"></form>

<h4 class="margin-rmv">Admissions Information</h4>

<h5 class="georgian">Georgian Students Admissions Information</h5>

<h5 class="international">International Students Admissions Information</h5>

Refer codepen: https://codepen.io/escapetomars/pen/vxBLgg

nashcheez · Accepted Answer · 2017-02-22 11:50:04Z

3

Change the spelling of document.getElementsByClassName.

Also, document.getElementsByClassName returns an array/list of elements. So you have to refer it with the correct index.

Refer code:

function georgianInfo() {
  document.getElementsByClassName("georgian")[0].style.display = "block";
  document.getElementsByClassName("international")[0].style.display = "none";
}

function internationalInfo() {
  document.getElementsByClassName("georgian")[0].style.display = "none";
  document.getElementsByClassName("international")[0].style.display = "block";
}

.georgian {
  display: none;
}

.international {
  display: block;
}

<table class="tab-menu" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <form><input type="button" onClick="georgianInfo()" value="for georgian students"></form>
    </td>
    <td>
      <form><input type="button" onClick="internationalInfo()" value="for international students"></form>
    </td>
  </tr>
</table>

<h4 class="margin-rmv">Admissions Information</h4>

<h5 class="georgian">Georgian Students Admissions Information</h5>

<h5 class="international">International Students Admissions Information</h5>

I would suggest you to go through the MDN article regarding Document.getElementsByClassName for a better understanding of the construct.

edited Feb 22, 2017 at 11:50

answered Feb 22, 2017 at 11:30

nashcheez

5,1931 gold badge30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

escapetomars Over a year ago

Thanks so much! That fixed it, and gives me a better understanding of how this works.

Nitesh · Accepted Answer · 2017-02-22 11:33:23Z

0

Change functions as:

    function georgianInfo() {
      document.getElementsByClassName("georgian")[0].style.display = "block";
      document.getElementsByClassName("international")[0].style.display = "none";
    }

    function internationalInfo() {
      document.getElementsByClassName("georgian")[0].style.display = "none";
      document.getElementsByClassName("international")[0].style.display = "block";
    }

answered Feb 22, 2017 at 11:33

Nitesh

1,5151 gold badge13 silver badges21 bronze badges

Comments

Vibhanshu · Accepted Answer · 2017-02-22 11:38:35Z

0

Correct method is document.getElementsByClassName and as the name suggests it returns an array of items. So if you have to apply anything on these elements you need to iterate over that array and then apply something on each element or you can pick a particular element using array indexes.

var element = document.getElementsByClassName('class')[0]; // assuming you have at least one matching element.
element.style.display = 'none';

Here is the link to updated codepen

http://codepen.io/vibhanshu/pen/EWYNMb

answered Feb 22, 2017 at 11:38

Vibhanshu

5423 silver badges14 bronze badges

Comments

Farzin Kanzi · Accepted Answer · 2017-02-22 11:39:42Z

0

There is a very important difference between getElementById and getElementsByClassName. Id is unique and there is only one element by id="abc". So getElementById('abc') gets the element and you can change its styles. Some browsers if you have repeated id, will get you the first one.

But getElementsByClassName is different. There could be multiple elements class="abc". So getElementsByClassName gives you a collection, and you can not change the style of a collection by the way you did. And as mentioned in another answers you need to select an element from the collection to change its styles.

document.getElementsByClassName("georgian")[0].style.display = "block";

answered Feb 22, 2017 at 11:39

Farzin Kanzi

3,4532 gold badges23 silver badges25 bronze badges

Collectives™ on Stack Overflow

Trying to toggle visibility of classes with buttons (using Javascript), absolutely nothing works, what am I missing?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related