学习DOM两周，自制语言切换器无法正常运行求助

嘿，我帮你定位到问题啦！你的语言切换功能没生效的核心原因是**getElementsByClassName()返回的是一个HTMLCollection（DOM元素集合），而不是单个元素**，你直接给这个集合设置.style属性是行不通的——因为只有单个DOM元素才有.style这个属性哦！

问题拆解 #

当你执行document.getElementsByClassName("eng")时，得到的是所有带有eng类的元素组成的集合（哪怕页面里只有一个这样的元素，它还是会返回长度为1的集合）。你之前的代码直接给这个集合加.style.display，浏览器根本不知道你要操作哪个元素，所以自然没有效果。

修正方案 #

我给你两种修正思路，你可以根据需求选：

方案1：遍历元素集合（推荐，适配多个同类别元素） #

这种方法适合以后页面里有多个需要切换语言的元素的情况，通用性更强：

1. 先给CSS加初始样式（让页面加载时默认显示一种语言）

/* 默认显示英文，隐藏俄文 */
.eng {
  display: inline;
}
.rus {
  display: none;
}

2. 修正JS代码

// 获取两个切换按钮
const engBtn = document.getElementById("eng-btn");
const rusBtn = document.getElementById("rus-btn");

// 封装英文切换逻辑
function switchToEnglish() {
  // 遍历所有eng类元素，设置显示
  const engElements = document.getElementsByClassName("eng");
  for (let elem of engElements) {
    elem.style.display = "inline";
  }
  // 遍历所有rus类元素，设置隐藏
  const rusElements = document.getElementsByClassName("rus");
  for (let elem of rusElements) {
    elem.style.display = "none";
  }
}

// 封装俄文切换逻辑
function switchToRussian() {
  const rusElements = document.getElementsByClassName("rus");
  for (let elem of rusElements) {
    elem.style.display = "inline";
  }
  const engElements = document.getElementsByClassName("eng");
  for (let elem of engElements) {
    elem.style.display = "none";
  }
}

// 给按钮绑定点击事件
engBtn.addEventListener("click", switchToEnglish);
rusBtn.addEventListener("click", switchToRussian);

方案2：直接取单个元素（适合确定只有一个同类别元素的场景） #

如果你确定页面里每个语言类（eng/rus）只有一个元素，可以直接通过索引[0]取集合里的第一个元素来操作：

const engBtn = document.getElementById("eng-btn");
engBtn.addEventListener("click", function() {
  document.getElementsByClassName("eng")[0].style.display = "inline";
  document.getElementsByClassName("rus")[0].style.display = "none";
});

const rusBtn = document.getElementById("rus-btn");
rusBtn.addEventListener("click", function() {
  document.getElementsByClassName("rus")[0].style.display = "inline";
  document.getElementsByClassName("eng")[0].style.display = "none";
});

这样修改后，你的语言切换器应该就能正常工作啦！

内容的提问来源于stack exchange，提问作者coder online