Question

按钮上的 Javascript EventListener 不起作用

2018-08-16

163

javascript button addeventlistener

我尝试使用 Javascript 在 HTML 上制作 按钮 并尝试制作具有 EventListener 的按钮

这里是代码：

function addRefresh(){
 var buildButton = `<button id = "refreshBtn"> testBtn </button>
 <script>
    document.getElementById('refreshBtn').addEventListener("click",function() {alert('hi'););
 </script>
 `
  document.getElementsByClassName('f_l')[0].innerHTML += buildButton;
}

网站上的 html：

<span class="f_l">
    <button id="refreshBtn"> testBtn </button>
    <script>
     document.getElementById('refreshBtn').addEventListener("click",function() {alert('hi'););
    </script>
</span>

但是当我单击按钮时，事件没有发生。

我也尝试过 按钮 onclick="myFunction()" 。

任何帮助都将不胜感激。谢谢

Answer 1

您缺少一个 carley 括号：

  document.getElementById('refreshBtn').addEventListener("click",function() {alert('hi'););

将其更改为：

  document.getElementById('refreshBtn').addEventListener("click",function() {alert('hi')});

Answer 2

按照以下步骤操作，效果很好。

index.html

<body>
    <span class="f_l"></span>
    <script src="main.js"></script>
</body>

main.js

function addRefresh() {

     var buildButton = `<button id="refreshBtn"> testBtn </button>`;
     document.getElementsByClassName("f_l")[0].innerHTML += buildButton;
     document.getElementById('refreshBtn').addEventListener("click",function() {alert("Hi");});
}

addRefresh();

为什么？

DRY：不需要通过 html 和 JS 添加按钮。
在 main.js 本身中添加事件监听器，而不是通过 <script> 标签。我认为 @dev_Fares 可能是对的（

您不能在内部 html 中编写脚本

）。

Answer 3

我认为你不能在内部 html 中编写脚本，并且你在 html 代码中重复它，因此 js 代码中不需要它

function addRefresh()
{ 
var buildButton = '<button id = "refreshBtn"> testBtn </button>';
document.getElementsByClassName('f_l')[0].innerHTML += buildButton;
}