如何在JS的if函数中检测按钮内容并实现文本切换

问题根源 #

你的代码存在两个关键问题：

1. 事件绑定错误：原生JS中元素的点击事件属性是小写的onclick，不是onClick（后者是React等框架的写法）
2. 文本状态未实时更新：content变量仅在页面加载时获取一次按钮文本，点击后按钮文本变更，但content不会同步更新，导致无法触发反向切换逻辑

修复后的完整代码 #

<html>
<body>
   <button id="btn">text1</button>
   <p id="result"></p>
   <script>
      const btn = document.getElementById("btn");

      btn.onclick = function(){
          // 每次点击实时获取按钮当前的纯文本内容
          const currentText = btn.textContent.trim();
          if(currentText === "text1"){
              btn.textContent = "text2";
          } else {
              btn.textContent = "text1";
          }
      }
   </script>
</body>
</html>

优化细节 #

• 改用textContent替代innerHTML：仅处理纯文本场景下，textContent更安全（避免XSS风险）且性能更优
• 实时获取文本：每次点击时读取按钮当前的文本状态，确保判断逻辑准确
• 补全else分支：实现"text1"与"text2"的双向切换
• 使用const声明变量：变量无需重新赋值时，const更符合代码规范

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