JavaScript中切换<p>文本至第三个选项时条件语句失效，求原因

核心问题原因 #

• 赋值/判断混淆：代码里错误使用=赋值运算符代替===比较运算符，比如if ((text.textContent = "text1"))这行是把"text1"赋值给文本节点，而非判断内容是否相等。这导致第一个if分支永远执行，后续的else if逻辑完全不会触发。
• 事件监听仅初始化一次：页面加载时仅根据初始的text1状态绑定了点击事件，后续文本切换到text2后，不会重新执行条件判断来绑定新的事件逻辑，所以点击右箭头只会一直执行切换到text2的代码。
• 大小写拼写错误：text.textcontent是错误写法，JavaScript是大小写敏感的，正确写法应为text.textContent。

修正后的代码实现 #

推荐用索引变量跟踪当前文本位置，逻辑更清晰且易扩展：

HTML（无需修改）

<div class="tutNavigation">
  <div class="flexNavigation">
    <div id="back"><i id="arrow-left"><-</i></div>
    <div class="tutorialText">
      <p></p>
    </div>
    <div id="next"><i id="arrow-right">-></i></div>
  </div>
</div>

JavaScript

const text = document.querySelector("p");
const backLeft = document.getElementById("back");
const arrowBack = document.getElementById("arrow-left");
const nextRight = document.getElementById("next");

// 存储所有待切换的文本内容
const textList = ["text1", "text2", "text3"];
// 跟踪当前显示的文本索引
let currentIndex = 0;

// 统一更新文本内容和箭头状态
function updateContent() {
  text.textContent = textList[currentIndex];
  // 当处于第一个文本时隐藏返回箭头
  arrowBack.classList.toggle("hidden", currentIndex === 0);
}

// 右箭头点击事件：切换到下一个文本
nextRight.addEventListener("click", () => {
  if (currentIndex < textList.length - 1) {
    currentIndex++;
    updateContent();
  }
});

// 左箭头点击事件：切换到上一个文本
backLeft.addEventListener("click", () => {
  if (currentIndex > 0) {
    currentIndex--;
    updateContent();
  }
});

// 初始化页面显示
updateContent();

修正逻辑说明 #

1. 用数组textList统一管理所有切换文本，currentIndex跟踪当前位置，避免直接依赖文本内容做判断，逻辑更稳定。
2. 封装updateContent函数负责更新文本和箭头状态，减少重复代码，便于后续维护。
3. 点击事件仅修改索引值后调用更新函数，逻辑简洁，且支持快速扩展更多文本选项。

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