Question

我正在尝试创建一个用于切换<p>元素中文本的按钮。这是HTML代码：

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

这是javaScript：

function toggle() {
      if(document.getElementById("unit").text()=="metric"){
          document.getElementById("unit").innerHTML="imperial";}

      else if(document.getElementById("unit").value=="imperial"){
          document.getElementById("unit").value="metric";}
      }
};

我做错了什么？

Answer 1

除非您正在处理.textContent或.innerHTML元素，否则请始终使用input或textarea：

＆＃13;

function toggle() {
  const unit = document.getElementById("unit")
  if (unit.textContent === "metric") {
    unit.textContent = "imperial";
  } else if (unit.textContent === "imperial") {
    unit.textContent = "metric";
  }
}

＆＃13;

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

＆＃13;

当您故意使用或插入HTML标记（可能存在安全性和编码问题）时，仅使用innerHTML。在设置或检索文本值时，请改用textContent。

Answer 2

您可以将innerHTML的结果用于检查和分配。

虽然您只有两个值，但只需要一次检查。

function toggle() {
    if (document.getElementById("unit").innerHTML === "metric") {
        document.getElementById("unit").innerHTML = "imperial";
    } else  {
        document.getElementById("unit").innerHTML = "metric";
    }
}

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

更好的版本会为实际值采用变量并切换此值。

function toggle() {
    unit = { metric: 'imperial', imperial: 'metric' }[unit];
    document.getElementById("unit").innerHTML = unit;
}

var unit = 'metric';

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

Answer 3

在else if您要设置value或#unit的{{1}}设置innerHTML。

所以：textContent应为document.getElementById("unit").value="metric";

编辑（将@TeeperPerformance评论中提到的innerText更改为textContent）

Answer 4

如果您在两个选项之间来回交换，则可以使用此模式，从而最大限度地减少检查部分。它没有考虑文本上的任何外部更改，但如果你想要做的只是交换这两个值，它将很好地工作。

&&查找第一个falsy值，这就是为什么this.toggled仅在属性为undefined（ae第一次运行函数时）时设置为true的原因，之后只需将其值更改为当前的值（false=>true，true=>false），并根据更新后的值显示文本。

function toggle() { 
  var p = document.getElementById("unit");

  this.toggled == undefined && (this.toggled = true)
  this.toggled = !this.toggled;
  
  p.textContent = (this.toggled) ? "metric" : "imperial";
};

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

如何切换文本切换？

4 个答案: