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

Question

我是 Java 的新手，但似乎无法解决这个问题；

使用 getElementsByClassName("") 时，切换不起作用，我收到错误消息“无法设置未定义的属性 'display'”
此外，当使用 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 return 具有此 class 名称的所有元素的集合您需要访问列表中的元素

如果您没有其他具有相同 class 名称的元素，这将有效

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

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

Switcher with getElementsByClassName("") not working

html

javascript

toggle