自从我开始学习 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() {&nbsp; &nbsp; // document.getElementsByClassName("eng").style.display = "inline";&nbsp; &nbsp; // document.getElementsByClassName("rus").style.display = "none";&nbsp; &nbsp; changeVisibility('rus', 'none');&nbsp; &nbsp; changeVisibility('eng', 'inline');})var rusBtn = document.getElementById("rus-btn");rusBtn.addEventListener("click", function() {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; changeVisibility('rus', 'inline');&nbsp; &nbsp; changeVisibility('eng', 'none');&nbsp; &nbsp; // document.getElementsByClassName("rus").style.display = "inline";&nbsp; &nbsp; // document.getElementsByClassName("eng").style.display = "none";});&nbsp;function changeVisibility(className, visibility) {&nbsp; const collection = document.getElementsByClassName(className);&nbsp; for(let i = 0 ; i < collection.length; i++) {&nbsp; &nbsp; collection[i].style.display = visibility;&nbsp; }}

Answer 2

getElementsByClassName返回一个集合而不是单个元素，因此 id 没有 DOM 元素的属性和方法。你可以尝试像这样迭代：var engBtn = document.getElementById("eng-btn");engBtn.addEventListener("click", function() {&nbsp; &nbsp; // document.getElementsByClassName("eng").style.display = "inline";&nbsp; &nbsp; // document.getElementsByClassName("rus").style.display = "none";&nbsp; &nbsp; changeVisibility('rus', 'none');&nbsp; &nbsp; changeVisibility('eng', 'inline');})var rusBtn = document.getElementById("rus-btn");rusBtn.addEventListener("click", function() {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; changeVisibility('rus', 'inline');&nbsp; &nbsp; changeVisibility('eng', 'none');&nbsp; &nbsp; // document.getElementsByClassName("rus").style.display = "inline";&nbsp; &nbsp; // document.getElementsByClassName("eng").style.display = "none";});&nbsp;function changeVisibility(className, visibility) {&nbsp; const collection = document.getElementsByClassName(className);&nbsp; for(let i = 0 ; i < collection.length; i++) {&nbsp; &nbsp; collection[i].style.display = visibility;&nbsp; }}