Question

我尝试使用button在HTML上制作Javascript 并尝试使按钮具有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>

但是当我单击按钮时，不会发生事件。

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

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

Answer 1

您错过了一个大括号：

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

将其更改为：

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

Answer 2

我认为您无法在内部html内编写脚本，而是在html代码中重复该脚本，因此在js代码内无需使用它

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

Answer 3

执行以下操作，即可正常运行。

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();

为什么？

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

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

）。

按钮上的Javascript EventListener不起作用

3 个答案: