Simple function only works once (show/hide divs) - vanilla JavaScript

Question

I'm working on a multi-language website.

I want to be able to press a button, and the display of all the (wrapper-content) divs becomes none , and only the correct one becomes inline-block .

It works. But only once. What is the problem? No JQuery please.

Edit added some code to html to make it "understandable"

JS (all the functions toSl, toAn etc are the same).

function toRu () {
    var lngs, i;
    lngs = document.querySelectorAll(".lng");
    for (var i=0;i<lngs.length;i++){
        lngs[i].style.display="none";
    }
    document.getElementById("ru").style.display="inline-block";
}

document.getElementById("slo").addEventListener("click", toSl);
document.getElementById("ang").addEventListener("click", toAn);
document.getElementById("nem").addEventListener("click", toNe);
document.getElementById("ita").addEventListener("click", toIt);
document.getElementById("hrv").addEventListener("click", toHr);
document.getElementById("rus").addEventListener("click", toRu);

HTML

<!DOCTYPE html>
<html>
<body>
<div class="lng" id="sl">
<nav>
<div id="lngSpace">
    Language Selector
    <input type="button" id="slo" class="zastave" value="Slo">
    <input type="button" id="ang" class="zastave" value="Eng">
    <input type="button" id="nem" class="zastave" value="Deu">
    <input type="button" id="ita" class="zastave" value="Ita">
    <input type="button" id="hrv" class="zastave" value="Hrv">
    <input type="button" id="rus" class="zastave" value="Rus">
</div>
</nav>
Content of the page in Sl language
</div>

<div class="lng" id="en">
<nav>
<div id="lngSpace">
    Language Selector
    <input type="button" id="slo" class="zastave" value="Slo">
    <input type="button" id="ang" class="zastave" value="Eng">
    <input type="button" id="nem" class="zastave" value="Deu">
    <input type="button" id="ita" class="zastave" value="Ita">
    <input type="button" id="hrv" class="zastave" value="Hrv">
    <input type="button" id="rus" class="zastave" value="Rus">
</div>
</nav>
Content of the page in En language
</div>

<div class="lng" id="de">
<nav>
<div id="lngSpace">
    Language Selector
    <input type="button" id="slo" class="zastave" value="Slo">
    <input type="button" id="ang" class="zastave" value="Eng">
    <input type="button" id="nem" class="zastave" value="Deu">
    <input type="button" id="ita" class="zastave" value="Ita">
    <input type="button" id="hrv" class="zastave" value="Hrv">
    <input type="button" id="rus" class="zastave" value="Rus">
</div>
</nav>
Content of the page in Ger language
</div>

etc etc

</body>
</html>

EDIT my code also contains this piece of JS which runs at the very start. I don't think it's effecting the rest of the JS, as I am trying to only change the display of divs and not reload the page... but just I'm posting it just in case (as the example posted to plnkr actually works...)

var language = navigator.language || navigator.languages[0];
console.log(language);
var languageFistTwo = language.substr(0,2); // To only keep the first 2 characters.
console.log(languageFistTwo);

switch (languageFistTwo) {
    case "sl":
        document.getElementById("sl").style.display="inline-block";
        break;  
    case "en":
        document.getElementById("en").style.display="inline-block";
        break;
    case "de":
        document.getElementById("de").style.display="inline-block";
        break;
    case "it":
        document.getElementById("it").style.display="inline-block";
        break;
    case "hr":
        document.getElementById("hr").style.display="inline-block";
        break;
    case "ru":
        document.getElementById("ru").style.display="inline-block";
        break;
    default:
        document.getElementById("en").style.display="inline-block";
        break;
}

Example: https://plnkr.co/edit/FWsUfBzRp1yuS4WKDTIw?p=info

Answer 1

This is an edited example of what I assume you are trying to do. If you want to run with your example you have to use class on the buttons instead of id and a click listeners to all images and not just the first set.

Either way, you can solve all in one function. You do not need a function for each language.

Comments and explanations are in the code.

 //function toRu(){ function toAny(){ var lngs = document.querySelectorAll(".lng"); for (var i=0;i<lngs.length;i++){ //REM: The element with the matching id is inline-block, the others none lngs[i].style.display = lngs[i].getAttribute('data-id') == this.value ? 'inline-block' : 'none' } } //REM: This only assings the event to one button /* document.getElementById("slo").addEventListener("click", toAny); document.getElementById("ang").addEventListener("click", toAny); document.getElementById("nem").addEventListener("click", toAny); document.getElementById("ita").addEventListener("click", toAny); document.getElementById("hrv").addEventListener("click", toAny); document.getElementById("rus").addEventListener("click", toAny); */ for(var tL=document.querySelectorAll('input.zastave'), i=0, j=tL.length; i<j; i++){ tL[i].addEventListener("click", toAny); }

 <!-- I do not know why you replicated the language selectors multiple times. For me this structure makes more sense. --> <nav> <input type="button" id="slo" class="zastave" value="Slo"> <input type="button" id="ang" class="zastave" value="Eng"> <input type="button" id="nem" class="zastave" value="Deu"> <input type="button" id="ita" class="zastave" value="Ita"> <input type="button" id="hrv" class="zastave" value="Hrv"> <input type="button" id="rus" class="zastave" value="Rus"> </nav> <!-- id should be unique. Therefore I changed it to data-id and made it match the values of the buttons. This allows us to easily toggle the right divs in one function --> <div class="lng" data-id="Slo"> Content of the page in Sl language </div> <div class="lng" data-id="Eng"> Content of the page in En language </div> <div class="lng" data-id="Deu"> Content of the page in Ger language </div>

Simple function only works once (show/hide divs) - vanilla JavaScript

Question

1 answers

solution1
1 ACCPTED 2020-01-17 14:22:00

Simple function only works once (show/hide divs) - vanilla JavaScript

Question

1 answers

solution1 1 ACCPTED 2020-01-17 14:22:00

solution1
1 ACCPTED 2020-01-17 14:22:00