时间戳

首页 > 解决方案 > Javascript 使用 if 语句切换

javascript - Javascript 使用 if 语句切换

问题描述

我在玩香草 javascript，想用一个if声明来切换。p用 my 写得很好document.getElementById("demo").innerHTML = result;，但是当我再次单击时它不会消失。

function myFunction() {
  var str = "Visit W3Schools";
  var patt = /w3schools/i;
  var result = str.match(patt);
  document.getElementById("demo").innerHTML = result;
  if(document.getElementById("demo") == result){
  document.getElementById("demo") = "0";
  }
}
<p>Click the button to do a case-insensitive search for "w3schools" in a string.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

标签： javascript

解决方案

不能document.getElementById("demo")直接比较result。document.getElementById("demo")返回一个HTMLElement, whileresult是一个数组。

此外，您在设置元素后检查它的内容。在这种情况下，if语句将始终计算为true并且if块将始终执行，这意味着文本将永远不会出现（它将被设置并立即删除）。

此外，要删除文本，您需要设置.innerHTML为空字符串 ( "")，而不是"0".

让你的代码工作的最简单的方法：

function myFunction() {
  var str = "Visit W3Schools";
  var patt = /w3schools/i;
  var result = str.match(patt);

  if (document.getElementById("demo").innerHTML == result) {
    document.getElementById("demo").innerHTML = "";
  } else {
    document.getElementById("demo").innerHTML = result;
  }
}
<p>Click the button to do a case-insensitive search for "w3schools" in a string.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

现在，可以对您的代码进行一些其他改进。

document.getElementById()有点慢，所以您只想获取一次元素，将其分配给一个变量，然后改用该变量。

此外，尽可能首选使用==,通常被认为是一种不好的做法。===但是，如果您在代码中更改==为===，它将无法正常工作。原因是str.match(patt)实际上返回了一个包含一项的数组。当您将其分配给.innerHTML浏览器时，会将其转换为字符串，这样可以正常工作。但是，当您与 进行比较.innerHTML时result，一个是字符串，另一个是数组，因此它们与 不匹配===。解决方案是 do var result = str.match(patt)[0];，因为您只对第一个匹配项感兴趣（请记住，数组是零索引的，所以第一项是0，而不是1）。

通过这些编辑，您的代码将显示为：

function myFunction() {
  var str = "Visit W3Schools";
  var patt = /w3schools/i;
  var result = str.match(patt)[0];
  var demo = document.getElementById("demo")

  if (demo.innerHTML === result) {
    demo.innerHTML = "";
  } else {
    demo.innerHTML = result;
  }
}
<p>Click the button to do a case-insensitive search for "w3schools" in a string.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

推荐阅读