JavaScript语言切换函数首次需双击生效的问题排查

AI 小北

2026-8-10

问题：语言切换与导航栏方向首次点击需双击才生效

网站的语言切换（阿拉伯语/英语）和导航栏方向切换功能，首次点击无法生效，必须双击才能正常工作，但后续操作运行顺畅。点击阿拉伯语选项时，导航栏会在从右到左（row-reverse）和从左到右（row）之间切换，相关逻辑均在languageChanger函数中实现，代码如下：

原JavaScript代码

function languageChanger() {

  const link = document.querySelector(".languagewrap");
  const headingEl = document.querySelector(".heading");
  const descr1El = document.querySelector(".description1");
  const descr2El = document.querySelector(".description2");

  // Introduction

  const introductionEl = document.querySelector("#introduction");
  const introductiondetailEl = document.querySelector("#introduction-detail");
  const introductionreadmoreEl = document.querySelector("#readmore");

  // Contact Us
  const contactUsHeadingEl = document.querySelector(".contactusheading");
  const contactUsDescEl = document.querySelector(".contactusdescription");
  const contactbuttonEl = document.querySelector(".contactbutton");
  const rights = document.querySelector(".rights");

  if (link.innerHTML == "عربى") {
    localStorage.setItem("lang" , 1 )
    document.body.style.setProperty("font-family", "Tajawal", "important");
    headingEl.textContent = data["عربى"].heading;
    descr1El.textContent = data["عربى"].description1;
    descr2El.textContent = data["عربى"].description2;
    introductionEl.textContent = data["عربى"].introduction;
    introductiondetailEl.textContent = data["عربى"].introductiondetail;
    introductionreadmoreEl.textContent = data["عربى"].introductionreadmore;
    contactUsHeadingEl.textContent = data["عربى"].contactusheading;
    contactUsDescEl.textContent = data["عربى"].contactusdescription;
    contactbuttonEl.textContent = data["عربى"].contactbutton;
    var arabic = document.getElementById("arabic");
    arabic.style.display = "grid";
    var english = document.getElementById("english");
    english.style.display = "none";
    var y = document.getElementById("content-direction-change");
    y.style.textAlign = "right";
    rights.textContent = data["عربى"].rights;
    link.innerHTML = "English";
    
  } else {
    localStorage.setItem("lang" , 0 )
    document.body.style.setProperty("font-family", "Lato", "important");
    headingEl.textContent = data["english"].heading;
    descr1El.textContent = data["english"].description1;
    descr2El.textContent = data["english"].description2;

    introductionEl.textContent = data["english"].introduction;
    introductiondetailEl.textContent = data["english"].introductiondetail;
    introductionreadmoreEl.textContent = data["english"].introductionreadmore;

    contactUsHeadingEl.textContent = data["english"].contactusheading;
    contactUsDescEl.textContent = data["english"].contactusdescription;
    contactbuttonEl.textContent = data["english"].contactbutton;
    link.innerHTML = "عربى";
    var arabic = document.getElementById("arabic");
    arabic.style.display = "none";
    var english = document.getElementById("english");
    english.style.display = "grid";
    var y = document.getElementById("content-direction-change");
    y.style.textAlign = "left";
    rights.textContent = data["english"].rights;
    
  }

  var x = document.getElementById("navbar-direction-change");
  if (x.style.flexDirection === "row") {
    x.style.flexDirection = "row-reverse";
  } else if (x.style.flexDirection === "row-reverse") {
    x.style.flexDirection = "row";
  } else {
    x.style.flexDirection = "row";
  }

  var y = document.getElementById("content-direction-change");
  if (y.style.flexDirection === "row") {
    y.style.flexDirection = "row-reverse";
    y.style.textAlign = "right";
  } else if (x.style.flexDirection === "row-reverse") {
    y.style.flexDirection = "row";
  } else {
    y.style.flexDirection = "row";
  }
}

原HTML代码

<nav id="navbar-direction-change" class="navbar">
  <div class="logoimage">
    <img class="desktop-logo" src="/images/logo.svg" alt="D360" />
    <img
      class="mobile-logo"
      src="/images/mobile-logo.svg"
      alt="D360"
    />
  </div>
  <ul id="menu" class="menu">
    <li class="aboutUsNav"><a href="about-us.html"> About </a></li>
    <li
      class="languagewrap"
      id="language"
      onclick="languageChanger()"
    >
      <a>عربى</a>
    </li>
  </ul>
</nav>

问题原因分析

依赖inline style判断样式状态：页面初始化时，导航栏和内容区域的flexDirection是通过CSS类设置的，并非直接写在元素的style属性中。而element.style.flexDirection只能读取inline样式的值，首次点击时该值为空，导致逻辑走else分支，无法正确触发方向切换，第二次点击时因为已经设置了inline样式，才能正常工作。
内容区域判断变量错误：在处理内容区域方向时，第二个else if错误使用了导航栏元素x的样式，而非内容区域元素y的样式，导致逻辑判断混乱。

解决方案

修改后的JavaScript代码

function languageChanger() {
  const link = document.querySelector(".languagewrap");
  const headingEl = document.querySelector(".heading");
  const descr1El = document.querySelector(".description1");
  const descr2El = document.querySelector(".description2");

  // Introduction
  const introductionEl = document.querySelector("#introduction");
  const introductiondetailEl = document.querySelector("#introduction-detail");
  const introductionreadmoreEl = document.querySelector("#readmore");

  // Contact Us
  const contactUsHeadingEl = document.querySelector(".contactusheading");
  const contactUsDescEl = document.querySelector(".contactusdescription");
  const contactbuttonEl = document.querySelector(".contactbutton");
  const rights = document.querySelector(".rights");

  // 统一判断当前语言状态
  const isArabic = link.innerHTML === "عربى";
  localStorage.setItem("lang", isArabic ? 1 : 0);

  if (isArabic) {
    document.body.style.setProperty("font-family", "Tajawal", "important");
    headingEl.textContent = data["عربى"].heading;
    descr1El.textContent = data["عربى"].description1;
    descr2El.textContent = data["عربى"].description2;
    introductionEl.textContent = data["عربى"].introduction;
    introductiondetailEl.textContent = data["عربى"].introductiondetail;
    introductionreadmoreEl.textContent = data["عربى"].introductionreadmore;
    contactUsHeadingEl.textContent = data["عربى"].contactusheading;
    contactUsDescEl.textContent = data["عربى"].contactusdescription;
    contactbuttonEl.textContent = data["عربى"].contactbutton;
    document.getElementById("arabic").style.display = "grid";
    document.getElementById("english").style.display = "none";
    const contentEl = document.getElementById("content-direction-change");
    contentEl.style.textAlign = "right";
    rights.textContent = data["عربى"].rights;
    link.innerHTML = "English";
  } else {
    document.body.style.setProperty("font-family", "Lato", "important");
    headingEl.textContent = data["english"].heading;
    descr1El.textContent = data["english"].description1;
    descr2El.textContent = data["english"].description2;
    introductionEl.textContent = data["english"].introduction;
    introductiondetailEl.textContent = data["english"].introductiondetail;
    introductionreadmoreEl.textContent = data["english"].introductionreadmore;
    contactUsHeadingEl.textContent = data["english"].contactusheading;
    contactUsDescEl.textContent = data["english"].contactusdescription;
    contactbuttonEl.textContent = data["english"].contactbutton;
    document.getElementById("arabic").style.display = "none";
    document.getElementById("english").style.display = "grid";
    const contentEl = document.getElementById("content-direction-change");
    contentEl.style.textAlign = "left";
    rights.textContent = data["english"].rights;
    link.innerHTML = "عربى";
  }

  // 处理导航栏方向：使用getComputedStyle获取实际生效的样式
  const navbarEl = document.getElementById("navbar-direction-change");
  const computedNavbarStyle = window.getComputedStyle(navbarEl);
  const currentNavbarDir = computedNavbarStyle.flexDirection;
  
  navbarEl.style.flexDirection = currentNavbarDir === "row" ? "row-reverse" : "row";

  // 处理内容区域方向：修复变量错误，统一逻辑
  const contentEl = document.getElementById("content-direction-change");
  const computedContentStyle = window.getComputedStyle(contentEl);
  const currentContentDir = computedContentStyle.flexDirection;
  
  if (currentContentDir === "row") {
    contentEl.style.flexDirection = "row-reverse";
    contentEl.style.textAlign = "right";
  } else {
    contentEl.style.flexDirection = "row";
    contentEl.style.textAlign = "left";
  }
}

关键优化点

用getComputedStyle读取实际样式：可以获取元素当前生效的所有CSS样式，包括类定义的样式，解决了初始化时inline style为空的问题。
简化语言状态判断：提取isArabic变量，避免重复判断link.innerHTML，让逻辑更清晰。
修复变量错误：内容区域的判断逻辑改为使用自身元素的样式，而非导航栏的样式。
减少DOM查询：重复使用的元素（如内容区域）只查询一次，提升性能。

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

JavaScript语言切换函数首次需双击生效的问题排查

原JavaScript代码 #

原HTML代码 #

问题原因分析 #

解决方案 #

修改后的JavaScript代码 #