单击按钮时切换元素的可见性

Question

我正在尝试执行一个练习，通过访问元素的 ID 来切换元素的可见性。当我点击它时，我可以让它消失。但是，我不明白我的代码有什么问题，因此单击时它不会重新出现。

let button = document.getElementById("button");

document.getElementById("button").onclick = function() {
  if (button.style.display === "none") {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
};

#button {
  display: block;
}

<p id="p1Text">Hello world</p>
<button id="button">Buttonni</button>

Answer 1

单击按钮后，您将使其消失。这就是你想让消失的意思吗？

或者您是否试图让以下段落在单击按钮时消失？

<p id="p1Text">Hello world</p>

如果您想使其消失，则必须将

getElementById

更改为正确的 ID。

目前，您正在做：

let button = document.getElementById("button"); 

这是获取按钮的ID，而是获取段落的元素

let button = document.getElementById("p1Text"); 

这应该可以解决问题

Answer 2

我会参考使用 element.classList.toggle 来实现这个场景。

https://www.w3schools.com/howto/howto_js_toggle_class.asp

const hello = document.querySelector('.hello');

document.getElementById("button").onclick = function() {
  hello.classList.toggle('hidden');
};

.hidden {
  display: none;
}

<p id="p1Text" class="hello">Hello world</p>
<button id="button">Buttonni</button>

Answer 3

如果通过“消失”您的意思是段落消失而不是上面代码中提到的按钮，这应该可以解决您的问题。

请检查下面的代码。我希望它能帮助你...

const paragraph = document.getElementById("p1Text");
const button = document.getElementById("button");
button.addEventListener("click",() => {
if(paragraph.style.display === "none" || paragraph.style.display ==="") {
    paragraph.style.display = "block";
} else {
    paragraph.style.display = "none";
}
});