Question

我编写了一个小程序，使用addEventListener（）在单击按钮时弹出警报。 PFB代码如下：

html文件

<html>
    <head>
        <title>name alert</title>
        <script type="text/javascript" src="test.js"></script>
</head>
    <body>
        <input id="p" type="button" value="alert">
    </body>
</html>

javascript文件

document.getElementById("p").addEventListener("click",greet,true);

function greet(){
  alert("hello there !");
}

我没有这样的弹出式屏幕两个文件都在同一个文件夹btw。

Answer 1

test.js在加载DOM之前加载并执行。因此，此时#p返回null。尝试收听onload事件，然后添加点击事件。

document.addEventListener("DOMContentLoaded", function(){
 
 document.getElementById("p").addEventListener("click",greet,true);
    
});

// global scope  
function greet(){
   alert("hello there !");
}

<input id="p" type="button" value="alert">

Answer 2

尝试移动你的

<script type="text/javascript" src="test.js"></script>

之前

</body>

Answer 3

您需要将addEventListener放在load事件上调用的函数中。在创建页面时，它将运行javascript。如果它还没有创建HTML，那么当addEventListener运行时，它将无法找到＆＃39; p＆＃39;元素，它会给你一个错误。

您也可以将javascript移动到html之后，但它更有条理地将其放在这样的内容中：

<script type="text/javascript">
window.addEventListener('load', 'function(){pageload()}', false)

function pageload()
{
    document.getElementById("p").addEventListener("click",greet,true);
}
</script>

addEventListener（）没有响应

3 个答案: