Question

所以我在这里有一些HTML代码：

<body>
<b style="font-size: 26px;">How the game works</b>
<u id="HowToPlay_HideShow" style="color: #9FF;">[hide]</u><br>
</body>

我还使用Javascript将隐藏文本转换为 show ，然后将 show 转换回隐藏点击了。

<script>
var HowGameWorks_Hidden = false;
document.getElementById("HowToPlay_HideShow").onclick = function () {
    if (HowGameWorks_Hidden == false) {
        document.getElementById("HowToPlay_HideShow").innerHTML = "[show]";
        HowGameWorks_Hidden = true;
    }
    if (HowGameWorks_Hidden == true) {
        document.getElementById("HowToPlay_HideShow").innerHTML = "[hide]";
        HowGameWorks_Hidden = false;
    }
}
</script>

然而，这似乎不起作用。单击隐藏和显示文本完全没有效果。所以我尝试删除这段代码：

if(HowGameWorks_Hidden == true) {
    document.getElementById("HowToPlay_HideShow").innerHTML = "[hide]";
    HowGameWorks_Hidden = false;
  }

当我点击它时，它正确地将隐藏文本转换为 show （但是，当然，不会将 show 文本重新打开进入隐藏）。

那么如何让我的代码正常工作？

Answer 1

这是因为你的第二个if语句总会在第一个if语句被触发时被触发，因为你将HowGameWorks_Hidden设置为true。您需要使用else：

if(HowGameWorks_Hidden == false) {
  document.getElementById("HowToPlay_HideShow").innerHTML = "[show]";
  HowGameWorks_Hidden = true;
}

else if(HowGameWorks_Hidden == true) {
  document.getElementById("HowToPlay_HideShow").innerHTML = "[hide]";
  HowGameWorks_Hidden = false;
}

HTML / Javascript - 单击时无法更改文本

1 个答案: