如何根据变量隐藏元素？

Question

num=1
document.getElementById("Num").innerHTML = num
//button to increase/decrease num
function next() {
num++
document.getElementById("Num").innerHTML = num
}
function before() {
num--
document.getElementById("Num").innerHTML = num
}

//hide and show asdf
if (num=1){
document.getElementById("asdf").style.visibility = "hidden";
} else {
document.getElementById("asdf").style.visibility = "visible";
}

<div id="Num"></div>
<button onclick="before()">before</button>
<button onclick="next()">next</button>
<div id="asdf">asdf</div>

我希望他们检查 num 并隐藏或显示 asdf。我认为 num 变量正在按我的预期增加/减少，但 asdf 没有显示。我从来没有使用过 if 语句超出功能，所以也许问题就在那里？

Answer 1

对于初学者来说，

=

是赋值，

==

是比较。您使用的是前者，而不是后者。这是一个很容易纠正的错字。但是，即使如此，当您单击按钮时逻辑也不会运行。

不同之处在于，增加/减少功能位于您调用的函数中，而显示/隐藏功能则不然。该功能仅在页面加载时运行一次，然后就不再运行。

您可以将该功能包装在一个函数中并在您想要的地方调用它。例如：

num = 1;
document.getElementById("Num").innerHTML = num;
toggleVisible();

//button to increase/decrease num
function next() {
  num++;
  document.getElementById("Num").innerHTML = num;
  toggleVisible();
}

function before() {
  num--;
  document.getElementById("Num").innerHTML = num;
  toggleVisible();
}

//hide and show asdf
function toggleVisible() {
  if (num == 1) {
    document.getElementById("asdf").style.visibility = "hidden";
  } else {
    document.getElementById("asdf").style.visibility = "visible";
  }
}

<div id="Num"></div>
<button onclick="before()">before</button>
<button onclick="next()">next</button>
<div id="asdf">asdf</div>

顺便说一句，我在代码行中添加了分号。您肯定会想养成这样做的习惯。 JavaScript 中存在自动分号插入功能，但您不应该一直依赖它。