HTML与JavaScript语言切换按钮失效问题排查请求

问题原因 #

1. 点击事件无法触发：CSS中.switch>span设置了pointer-events: none;，这会让EN和ES对应的<span>元素完全无法接收点击事件，导致你绑定的click监听器根本不会执行。
2. 逻辑与控件状态脱节：页面里的复选框(#language-toggle)没有被利用，开关的UI状态和语言切换逻辑完全分离，既不符合交互习惯，也容易导致状态不一致。

修复方案 #

1. 修改CSS，恢复点击交互

移除.switch>span中的pointer-events: none;属性，让文字区域可以响应点击：

.switch>span {
  position: absolute;
  top: 10px;
  /* 移除这一行：pointer-events: none; */
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  width: 50%;
  text-align: center;
  cursor: pointer; /* 可选：添加鼠标指针样式，提示可点击 */
}

2. 优化JavaScript逻辑，联动复选框状态

调整代码逻辑，让语言切换和复选框状态绑定，同时处理span的点击事件来同步控件状态：

const toggle = document.getElementById("language-toggle");
const english = document.getElementById("en");
const espanol = document.getElementById("es");
const hey = document.getElementById("hey");
const text = document.getElementById("text");

// 根据复选框状态切换语言
function updateLanguage() {
  if (toggle.checked) {
    // 选中状态：切换为西班牙语
    hey.textContent = "Hey, yo soy Español";
    text.textContent = "Yo soy un texto en el idioma español";
  } else {
    // 未选中状态：切换为英语
    hey.textContent = "Hey, I'm English";
    text.textContent = "I am a text in the English language";
  }
}

// 绑定复选框的change事件
toggle.addEventListener("change", updateLanguage);

// 点击EN/ES文字时，切换复选框状态
english.addEventListener("click", () => {
  toggle.checked = false;
  updateLanguage();
});

espanol.addEventListener("click", () => {
  toggle.checked = true;
  updateLanguage();
});

// 初始化语言状态
updateLanguage();

修复后的效果

现在点击EN或ES文字，不仅能切换语言内容，还会同步开关的UI状态，交互逻辑更连贯。

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