我的 html 和 javascript 按钮无法更改语言

Question

I would like to know if any of you can help me and tell me why my code does not work. What I want to do is that when I press the EN button, the language is changed to English and when I press the ES button, the language is changed to Spanish. The problem is that the javascript code that I have made does not work.

 const english = document.getElementById("en") const espanol = document.getElementById("es") const hey = document.getElementById("hey") const text = document.getElementById("text") english.addEventListener("click", function() { change(english, espanol); }); espanol.addEventListener("click", function() { change(espanol, english); }); function change(lang1, lang2) { if (lang1.innerHTML == "EN") { hey.innerHTML = "Hey, I'm English"; text.innerHTML = "I am a text in the English language"; } else { hey.innerHTML = "Hey, yo soy Español"; text.innerHTML = "Yo soy un texto en el idioma ingles "; } }

 .switch { position: relative; display: inline-block; margin: 0 5px; }.switch>span { position: absolute; top: 10px; pointer-events: none; font-family: 'Helvetica', Arial, sans-serif; font-weight: bold; font-size: 12px; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, .06); width: 50%; text-align: center; } input.check-toggle-round-flat:checked~.off { color: #000; } input.check-toggle-round-flat:checked~.on { color: #fff; }.switch>span.on { left: 0; padding-left: 2px; color: #000; }.switch>span.off { right: 0; padding-right: 4px; color: #fff; }.check-toggle { position: absolute; margin-left: -9999px; visibility: hidden; }.check-toggle+label { display: block; position: relative; cursor: pointer; outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input.check-toggle-round-flat+label { padding: 2px; width: 100px; height: 35px; background-color: #facf0f; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; border-radius: 60px; } input.check-toggle-round-flat+label:before, input.check-toggle-round-flat+label:after { display: block; position: absolute; content: ""; } input.check-toggle-round-flat+label:before { top: 2px; left: 2px; bottom: 2px; right: 2px; background-color: #facf0f; -webkit- -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; border-radius: 60px; } input.check-toggle-round-flat+label:after { top: 4px; left: 4px; bottom: 4px; width: 48px; background-color: #fff; -webkit-border-radius: 52px; -moz-border-radius: 52px; -ms-border-radius: 52px; -o-border-radius: 52px; border-radius: 52px; -webkit-transition: margin 0.2s; -moz-transition: margin 0.2s; -o-transition: margin 0.2s; transition: margin 0.2s; } input.check-toggle-round-flat:checked+label {} input.check-toggle-round-flat:checked+label:after { margin-left: 44px; }

 <div class="switch"> <input id="language-toggle" class="check-toggle check-toggle-round-flat" type="checkbox"> <label for="language-toggle"></label> <span class="on" id="en">EN</span> <span class="off" id="es">ES</span> </div> <h1 id="hey"> Hey, I'm English</h1> <div> <p id="text">I am a text in the English language </p> </div>

https://codepen.io/Skyance11441/pen/gOeQPJO

Answer 1

You can use change event on the input field instead

 const english = document.getElementById("en") const espanol = document.getElementById("es") const projects = document.getElementById("hey") const contact = document.getElementById("text") const toggle = document.getElementById("language-toggle") toggle.addEventListener("change", function(e) { if (e.target.checked) { change(espanol, english); } else { change(english, espanol); } }) function change(lang1, lang2) { if (lang1.innerHTML == "EN") { hey.innerHTML = "Hey, I'm English"; text.innerHTML = "I am a text in the English language"; } else { hey.innerHTML = "Hey, yo soy Español"; text.innerHTML = "Yo soy un texto en el idioma ingles "; } }

 .switch { position: relative; display: inline-block; margin: 0 5px; }.switch>span { position: absolute; top: 10px; pointer-events: none; font-family: 'Helvetica', Arial, sans-serif; font-weight: bold; font-size: 12px; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, .06); width: 50%; text-align: center; } input.check-toggle-round-flat:checked~.off { color: #000; } input.check-toggle-round-flat:checked~.on { color: #fff; }.switch>span.on { left: 0; padding-left: 2px; color: #000; }.switch>span.off { right: 0; padding-right: 4px; color: #fff; }.check-toggle { position: absolute; margin-left: -9999px; visibility: hidden; }.check-toggle+label { display: block; position: relative; cursor: pointer; outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input.check-toggle-round-flat+label { padding: 2px; width: 100px; height: 35px; background-color: #facf0f; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; border-radius: 60px; } input.check-toggle-round-flat+label:before, input.check-toggle-round-flat+label:after { display: block; position: absolute; content: ""; } input.check-toggle-round-flat+label:before { top: 2px; left: 2px; bottom: 2px; right: 2px; background-color: #facf0f; -webkit- -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; border-radius: 60px; } input.check-toggle-round-flat+label:after { top: 4px; left: 4px; bottom: 4px; width: 48px; background-color: #fff; -webkit-border-radius: 52px; -moz-border-radius: 52px; -ms-border-radius: 52px; -o-border-radius: 52px; border-radius: 52px; -webkit-transition: margin 0.2s; -moz-transition: margin 0.2s; -o-transition: margin 0.2s; transition: margin 0.2s; } input.check-toggle-round-flat:checked+label {} input.check-toggle-round-flat:checked+label:after { margin-left: 44px; }

 <div class="switch"> <input id="language-toggle" class="check-toggle check-toggle-round-flat" type="checkbox"> <label for="language-toggle"></label> <span class="on" id="en">EN</span> <span class="off" id="es">ES</span> </div> <h1 id="hey"> Hey, I'm English</h1> <div> <p id="text">I am a text in the English language </p> </div>