JS实现AR/EN语言切换时无法反向切换的问题如何解决？

问题根因 #

• 判断条件误用了赋值运算符=而非全等比较运算符===，导致每次进入函数都会强制把按钮值设为AR，永远只会执行第一个分支逻辑，无法触发else分支的切换逻辑
• 你使用的是普通<button>标签，自定义的AR/EN是按钮的文本内容，而非表单元素的value属性，读取.value拿不到正确的状态值

修复后代码 #

JavaScript代码 #

function change() {
  const langBtn = document.getElementById('AE');
  const bodyEl = document.getElementById('body');
  // 读取按钮文本判断当前语言状态
  const currentLang = langBtn.innerText.trim();
  // 抽离重复的fetch逻辑，减少代码冗余
  fetch("https://api.npoint.io/abb3ff619eec383b1bb7")
    .then(response => response.json())
    .then(data => {
      if (currentLang === "AR") {
        langBtn.innerText = "EN";
        bodyEl.dir = "rtl";
        document.querySelector("#lang").innerText = data.name[0].ara;
      } else {
        langBtn.innerText = "AR";
        bodyEl.dir = "ltr";
        document.querySelector("#lang").innerText = data.name[0].eng;
      }
    })
}

HTML代码（原有逻辑无需修改） #

<body id="body">
  <button style="color:black;" id="AE" onclick="change()">AR</button>
  <div id="lang">Amjad</div>
</body>

效果验证 #

点击AR按钮会切换为EN，同步切换页面为阿拉伯语文本、从右到左布局；点击EN按钮会切换回AR，同步切换页面为英文文本、从左到右布局，双向切换功能正常。

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