如何实现文本切换按钮？排查我的HTML与JavaScript代码错误

咱们来一步步拆解你代码里的问题，然后给出修复方案：

代码里的核心问题 #

• 错误混用jQuery与原生JS语法：你用了.text()来获取<p>元素的文本内容，但这是jQuery的专属方法，原生JavaScript里应该用textContent（仅获取纯文本，推荐）或者innerHTML（会包含元素内的HTML标签）。
• 错误使用.value属性：<p>标签不属于表单控件（比如<input>、<select>这类），它没有.value属性，判断和赋值都应该统一用textContent或者innerHTML。
• 多余的语法错误：你的JavaScript代码最后多了一个};，这会直接导致语法报错，需要删掉。

修复后的完整代码 #

HTML部分 #

<button onclick="toggle()">Switch</button> 
<p id="unit">metric</p>

JavaScript部分 #

function toggle() {
  // 先获取一次元素，避免重复查询DOM，提升性能
  const unitElement = document.getElementById("unit");
  if (unitElement.textContent === "metric") {
    unitElement.textContent = "imperial";
  } else {
    unitElement.textContent = "metric";
  }
}

补充说明：我把获取元素的操作单独提出来只执行一次，不用每次判断都去查询DOM；另外因为只有两种切换状态，用else就足够覆盖场景，不需要额外写else if。

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