Question

我正在玩香草JavaScript，想通过if语句进行切换。 p与我的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>

Answer 1

您不能直接将document.getElementById("demo")与result进行比较。 document.getElementById("demo")返回一个HTMLElement，而result是一个数组。

此外，在设置元素之后，还要检查元素的内容。在这种情况下，if语句将始终求值为true，并且if块将始终执行，这意味着该文本将永远不会出现（将被设置并被立即删除）。 / p>

此外，要删除文本，您需要将.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进行比较时，一个是字符串，另一个是数组，因此它们与===不匹配。解决方案是执行var result = str.match(patt)[0];，因为您只对第一个匹配感兴趣（请记住，数组是零索引的，所以第一项是0，而不是1）。 / p>

进行这些编辑后，您的代码将显示为：

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>

Answer 2

document.getElementById("demo") == result不是有用的比较。左侧是DOM元素，而右侧是数组。另外，将"0"分配给DOM元素也没有意义。要修复此问题，请在两者中都添加.innerHTML，就像在上一行中将其添加一样。另外，在innerHTML上匹配，而不是在常量str上匹配。

Answer 3

document.getElementById("demo")返回null或HTMLElement，因此您的条件将始终为false。不仅如此，您的result返回将返回array或null。您无法将getElementById与result进行比较，这是正确的处理条件的方式

function myFunction() {
  var str = "Visit W3Schools";
  var patt = /w3schools/i;
  var result = str.match(patt);
  if(result){ // the right way to write your condition
    document.getElementById("demo") = "0";
  }
}

更新：

function myFunction() {
  var str = "Visit W3Schools";
  var patt = /w3schools/i;
  var result = str.match(patt);
  if(result){
     document.getElementById("demo") = "0";
  } else {
      document.getElementById("demo").innerHTML = result[0]; // result index 0 here because match return array
  }
}

Answer 4

他们是您缺少或困惑的几件事。

str.match返回数组|因此使用书写result[0]实际上是最先匹配的字符串
document.getElementById("demo").innerHTML = result[0];应该将p#demo innerHTML更改为W3Schools，然后将p innerHTML与相同的字符串进行比较永远是真的。 |因此在p innerHTML中它将始终为“ 0”。
要切换innerHTML，必须在if-else中添加两个大小写，以便

function myFunction() {
  var str = "Visit W3Schools";
  var patt = /w3schools/i;
  var result = str.match(patt);
  // if W3Schools is in innerHTML
  if (document.getElementById("demo").innerHTML == result[0]) {
    // change "0" to "" for making the innerHTML blank
    document.getElementById("demo").innerHTML = "0";
  }
  else {
    document.getElementById("demo").innerHTML = result[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>

用if语句切换JavaScript

4 个答案: