时间戳

首页 > 解决方案 > 自从我开始学习 DOM 已经 2 周了。尝试制作语言切换器。不工作

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

问题描述

我目前在 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";
})

不知道为什么它不起作用

标签： javascripthtml

解决方案

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;
  }
}

推荐阅读