带有 if 条件的 addEventListener 不起作用

Question

我正在尝试制作一个按钮，触发 <p> 元素从 Boing 更改！到 Bummtschak！

当页面加载时 Bummtschak！显示，虽然我没有点击并且在下面的点击事件中没有任何反应。我不知道我做错了什么。

const para = document.querySelector("p");
const btn = document.getElementById("btn");

btn.addEventListener('click', backTo());
function backTo() {
   if (para.textContent == "Boing!") {
       para.textContent = "Bummtschak!";
   }else{
       para.textContent = "Bummtschak!";
   }
}

html是：

...
<script src="script.js" defer></script>
</head>
<body>
    <button id="btn"></button>
    <p>Boing!</p>
</body>
</html>

Answer 1

您不应该在 addEventListener 中包含 ()

const para = document.querySelector("p");
const btn = document.getElementById("btn");

btn.addEventListener('click', backTo);
function backTo() {
   if (para.textContent == "Boing!") {
       para.textContent = "Bummtschak!";
   }else{
       para.textContent = "Bummtschak!";
   }
}

   <button id="btn"></button>
    <p>Boing!</p>

带有 if 条件的 addEventListener 不起作用

addEventListener with if condition not working

javascript

dom-events

onclicklistener