-1

So I wanted to change the language of my website from english to chinese by hiding the english text then show the chinese text, vice versa.

I sort of followed this example: https://codepen.io/JFeremy/post/switch-language-button-js but instead use 'display' and classes

I have tried to solve it on my own, by putting the script code at the bottom of the body and correct the use of the getbyElementbyClassname code several times.

However, i still seem lost on the meaning of the error.

css code

.ch-sim{
display: none;}

part of my html code

 <div class="border">
  <h3 class="en">Raspberry Sherbet Punch</h3>
  <h3 class="ch-sim">覆盆子果汁牛奶打孔</h3>
  <p class="en" style="text-align:center;"> Pinkish and Yellowish goodness in a drink.</p>
  <p class="ch-sim" style="text-align:center;">饮料中的淡黄色和淡黄色的好味道。</p>

button to activate

 <li class="list-right"><a class="nav-con" onclick="Chinese()"> <b>中文</b> </a></li>
<li class="list-right"><a class="nav-con" onclick="English()"> <b>En</b> </a></li>

JavaScript code

var chin = document.getElementsByClassName("chin-sim");
var eng = document.getElementsByClassName("en");
function Chinese(){
  if (chin.style.display="none"){
    for (var i=0;i<chin.length;i+=1){chin[i].style.display="inline"};
    for (var i=0;i<eng.length;i+=1){eng[i].style.display="none"};
  }
}

function English(){
  if (eng.style.display="none"){
    for (var i=0;i<chin-sim.length;i+=1){chin.style.display="none"};
    for (var i=0;i<eng.length;i+=1){chin.style.display="inline"};
  }
}
Striped
  • 2,544
  • 3
  • 25
  • 31
Yap Yongliang
  • 1
  • 2

1 Answers1

0

chin is a collection, not a single element. You should iterate over it:

var x = document.getElementsByClassName("example");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

Doc here: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Striped
  • 2,544
  • 3
  • 25
  • 31