javascript - 带有 getElementsByClassName (""的切换器不工作

Question

我对 Java 还很陌生，但似乎无法解决这个问题；

使用 getElementsByClassName("") 时，切换不起作用我收到错误“无法设置未定义的属性‘显示’”

此外，当双击英文按钮时，使用 getElementByID("") 测试此 JS 时，文本完全消失。我想一直保持一个可见(所以无论是英语/德语)

有没有办法解决这个问题？
先感谢您 :)

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

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

<button onclick="return showHideEnglish();">English</button>
<button onclick="return showHideGerman();">German</button>
<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>

Answer 1

getElementsByClassName 返回具有此类名称的所有元素的集合
您需要访问列表中的元素
如果您没有具有相同类名的其他元素，这将起作用

 var english = document.getElementsByClassName("text__english")[0];
  var german = document.getElementsByClassName("text__german")[0];