我试图通过外部JavaScript将click或onlclick事件附加到button元素，但它没有工作。 有人能帮忙吗？ 我在下面写我的代码以供参考。 Html部件:-
null
<head>
<script src="script.js"></script>
</head>
<body>
<button id="myBtn">ClickMe</button>
<p id="demo"></p>
</body>
JS代码:-
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
您需要等待DOM加载元素。
html标记后的Def脚本。 解决方案1:
<head>
</head>
<body>
<button id="myBtn">ClickMe</button>
<p id="demo"></p>
<!-- Or put script tag in end of body-->
</body>
<script src="script.js"></script>
其他解决方案使用onload函数。 在onload调用中，DOM被加载并准备好进行访问。 解决方案2:
// SCRIPT
window.onload = function(){
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
};
<script src="script.js"></script>
</head>
<body>
<button id="myBtn">ClickMe</button>
<p id="demo"></p>
</body>
试试看:
null
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
<button id="myBtn">ClickMe</button>
<p id="demo"></p>
在HTML后面添加script标记，它一定会解决您的问题
null
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}<html>
<head>
</head>
<body>
<button id="myBtn">ClickMe</button>
<p id="demo"></p>
<script src="script.js"></script>
</body>
</html>