Call multiple getElementsByClassName() with JS

user_2120192 0
Viewed 77

I am puzzling at the moment with getting my JS working on multiple class elements. Currently in the code it is only changing the display:none of the first div it can find. I have read some tutorials but until now I am unable to implement this into my js and getting it to work.

Is someone able to help me out with this? Thanks in advance!

function showHideEnglish() {
        var english = document.getElementsByClassName("text__english")[0]; 
  
        var german = document.getElementsByClassName("text__german")[0];
         german.style.display = "none";
        if(english.style.display == "block") {
                german.style.display = "none";             
          }
        else {
            english.style.display = "block";            
        }
    }

    function showHideGerman() {
        var english = document.getElementsByClassName("text__english")[0];
        var german = document.getElementsByClassName("text__german")[0];
        english.style.display = "none";
        if(german.style.display == "block") {
                 english.style.display = "none";
          }
        else {
             german.style.display = "block";
        }
    }
<button onclick="showHideEnglish();">English</button>
<button onclick="showHideGerman();">German</button>

<div class="text__english"style="display:block;">This text is English</div><br>
<div class="text__german" style="display:none;">dieser Text ist auf Deutsch</div><br>
<div class="text__english"style="display:block;">This text is English</div>
<div class="text__german" style="display:none;">dieser Text ist auf Deutsch</div>

toggle html javascript
1 Answers

This works no matter how many elements are on the page:

function showHideEnglish() {
        var german = document.getElementsByClassName("text__german");
        for (var i = 0; i < german.length; i++) {
            german[i].style.display = "none";
        }
        var english = document.getElementsByClassName("text__english"); 
        for (var i = 0; i < english.length; i++) {
            english[i].style.display = "block";            
        }
     }
    
     function showHideGerman() {
        var german = document.getElementsByClassName("text__german");
        for (var i = 0; i < german.length; i++) {
            german[i].style.display = "block";
        }
        var english = document.getElementsByClassName("text__english"); 
        for (var i = 0; i < english.length; i++) {
            english[i].style.display = "none";            
        }
     }
    <button onclick="showHideEnglish();">English</button>
    <button onclick="showHideGerman();">German</button>

    <div class="text__english" style="display:block;">This text is English</div><br>
    <div class="text__german" style="display:none;">dieser Text ist auf Deutsch</div><br>
    <div class="text__english" style="display:block;">This text is English</div>
    <div class="text__german" style="display:none;">dieser Text ist auf Deutsch</div>

user_113523820
Related