自从我开始学习 DOM 以来已经 2 周了。试图制作语言切换器。不工作

Question

我目前在 html 中有两个按钮：<div>  <button class="choose-lang" id="eng-btn">English</button></div><div>  <button class="choose-lang" id="rus-btn">Русский</button></div>当我点击 eng-btn 的按钮时，它应该将“eng”的类切换到 display =“inline”并将“rus”的类切换到 display =“none”；// My html<h2 class="form-heading"><span class="eng">Enter your v-number:</span><span class="rus">Введите ваш номер:</span></h2>我将我的 CSS 文件保持为空，我的意思是我没有为 css 文件中的 eng 和 rus 类提供任何属性。我在js文件中写了以下内容：var engBtn = document.getElementById("eng-btn");engBtn.addEventListener("click", function() {    document.getElementsByClassName("eng").style.display = "inline";    document.getElementsByClassName("rus").style.display = "none";})var rusBtn = document.getElementById("rus-btn");rusBtn.addEventListener("click", function() {    document.getElementsByClassName("rus").style.display = "inline";    document.getElementsByClassName("eng").style.display = "none";})不知道为什么它不起作用

Answer 1

getElementsByClassName返回一个集合而不是单个元素，因此 id 没有 DOM 元素的属性和方法。

你可以尝试像这样迭代：

var engBtn = document.getElementById("eng-btn");

engBtn.addEventListener("click", function() {

    // document.getElementsByClassName("eng").style.display = "inline";

    // document.getElementsByClassName("rus").style.display = "none";

    changeVisibility('rus', 'none');

    changeVisibility('eng', 'inline');

})

var rusBtn = document.getElementById("rus-btn");

rusBtn.addEventListener("click", function() {

    

    changeVisibility('rus', 'inline');

    changeVisibility('eng', 'none');

    // document.getElementsByClassName("rus").style.display = "inline";

    // document.getElementsByClassName("eng").style.display = "none";

}); 

function changeVisibility(className, visibility) {

  const collection = document.getElementsByClassName(className);

  for(let i = 0 ; i < collection.length; i++) {

    collection[i].style.display = visibility;

  }

}

Answer 2

getElementsByClassName返回一个集合而不是单个元素，因此 id 没有 DOM 元素的属性和方法。

你可以尝试像这样迭代：

var engBtn = document.getElementById("eng-btn");

engBtn.addEventListener("click", function() {

    // document.getElementsByClassName("eng").style.display = "inline";

    // document.getElementsByClassName("rus").style.display = "none";

    changeVisibility('rus', 'none');

    changeVisibility('eng', 'inline');

})

var rusBtn = document.getElementById("rus-btn");

rusBtn.addEventListener("click", function() {

    

    changeVisibility('rus', 'inline');

    changeVisibility('eng', 'none');

    // document.getElementsByClassName("rus").style.display = "inline";

    // document.getElementsByClassName("eng").style.display = "none";

}); 

function changeVisibility(className, visibility) {

  const collection = document.getElementsByClassName(className);

  for(let i = 0 ; i < collection.length; i++) {

    collection[i].style.display = visibility;

  }

}