使用外部 JavaScript 文件将单击事件附加到按钮时出现问题

>我正在尝试通过外部JavaScript将单击或onlclick事件附加到按钮元素，但它不起作用。谁能帮忙？我正在下面编写我的代码以供参考。网页部分：-

<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 标记之后定义脚本。解决方案 1：

<head>
</head>
<body>
<button id="myBtn">ClickMe</button>
<p id="demo"></p>    
<!--Put script tag in end of body-->
<script src="script.js"></script>
</body>

其他解决方案使用加载功能。在加载调用中，DOM 已加载并准备好访问。解决方案 2：

// SCRIPT
window.onload = function() {
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
document.getElementById("myBtn").addEventListener("click", myFunction);
};
<script src="script.js"></script>
</head>
<body>
<button id="myBtn">ClickMe</button>
<p id="demo"></p>    
</body>

试试吧：

function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
window.onload = function() {
document.getElementById("myBtn").addEventListener("click", myFunction);
}


<button id="myBtn">ClickMe</button>
<p id="demo"></p>

在 HTML 后添加脚本标记它肯定会解决您的问题

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>

相关内容

最新更新

热门标签：