Console.log 仅显示一次结果，添加事件监听器时按钮不起作用

Question

我知道这是一个基本问题，但我不知道如何解决它！
在我的部分代码中，我有与下面相同的代码块；那部分工作正常，但是对于这部分我遇到了错误！

console.log只是第一次显示结果！

const bt = document.createElement('button');
bt.innerHTML = "CLICK HERE";
document.querySelector('#dv').append(bt);

bt.addEventListener('click', console.log('clicked'));

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <script src="test.js" defer></script>
    </head>
    <body>
        <div id="dv"></div>
    </body>
</html>

Answer 1

您需要将事件回调代码包装在函数示例中

const bt = document.createElement('button');
bt.innerHTML = "CLICK HERE";
document.querySelector('#dv').append(bt);

bt.addEventListener('click', () => console.log('clicked'));

Answer 2

您正在立即执行。在添加 eventListener 时创建一个函数。

const bt = document.createElement('button');
bt.innerHTML = "CLICK HERE";
document.querySelector('#dv').append(bt);

bt.addEventListener('click', function() {
  console.log('clicked')
});

<!DOCTYPE html>
<html>

<head>
  <title>test</title>
</head>

<body>
  <div id="dv"></div>
</body>

</html>

Answer 3

您需要使用 addEventListener 附加点击事件，如下所示。

const bt = document.createElement('button');
bt.innerHTML = "CLICK HERE";
document.querySelector('#dv').append(bt);

bt.addEventListener('click', () => console.log('clicked'));

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <div id="dv"></div>
    </body>
</html>

Console.log 仅显示一次结果，添加事件监听器时按钮不起作用

Console.log show result only once and the button don't work when addEventListener

javascript

dom-events