使用JS隐藏文本

Question

我在另一个线程中问了这个，并得到了一些有用的建议。我要重新发布此内容，因为在其他帖子上没有任何吸引力。

我有一小段html，可打开侧面导航栏：

<div id="main">
        <span id="open" style="font-size:30px;cursor:pointer">&#9776; Open</span>
        <img class="imgcenter" src="/images/eggs.jpg">
        <p>Where </p>
        <img class="imgcenter" src="/images/eggs.jpg">

      </div>

此html的相应js，当单击☰Open时应该显示隐藏的“ Open”：

document.getElementById("open").addEventListener("click", function openMainNav() {
document.getElementById("myMainNav").classList.add('sideNavOpen');
document.getElementById("main").classList.add('lmarg250');
var x = document.getElementById("open");
if (x.innerHTML === "☰ Open") {
  x.innerHTML = "☰";
} else {
  x.innerHTML = "☰ Open";
}

});

我被指示删除hmtl内部的“ onclick”，因为它是不安全的，并且也没有定义我的var x，因此我已经定义了它。我已经修复了这两个问题，但是无法隐藏“打开”文本。我认为问题出在我如何将元素分组或如何分配ID？任何建议将不胜感激。

Answer 1

代替

if (x.innerHTML === "☰ Open") {

执行

if (x.innerHTML == "☰ Open") {

因为我们只想匹配值，而不受类型的困扰