使文本消失并在每次单击按钮时重新出现

Question

[我有一个按钮元素和一个段落元素，我在按钮元素上附加了一个eventListener（click）事件，所以我想要的是，当我单击按钮时，该段落的文本消失，而当我再次单击该按钮时，我希望它出现来回切换来回点击消失，消失。

let button = document.querySelector("button");
button.addEventListener("click",function(e){

let p = document.querySelector("p");
p.style.display = "none";
this.addEventListener("click",function(c){
let p = document.querySelector("p");
p.style.display = "initial";
})
})

Answer 1

使用原始事件处理程序，并根据p.style.display的当前值更改display的值：

const button = document.querySelector("button");
const p = document.querySelector("p");

button.addEventListener("click", function(e) {
  p.style.display = p.style.display === "none" ? 'initial' : 'none';

})

<p>Text</p>
<button type="button">Toggle</button>

Answer 2

您只需要添加一个事件监听器，即可打开/关闭一个类。

const button = document.querySelector('button');
const p = document.querySelector('p');

button.addEventListener("click", handleClick, false);

function handleClick() {
  p.classList.toggle('hidden');
}

.hidden {
  display: none;
}

<button>Click</button>
<p>Hallo</p>