按钮单击时不会做任何事情
按钮单击时不会做任何事情
提问于 2022-10-02 07:04:01
因此，我有一个带有按钮的HTML文件和一个应该具有某些功能的外部js文件。但不起作用。下面是代码：
HTML完整代码：
const btn = document.getElementById("play");
btn.addEventListener("click", alertMessage);
function alertMessage() {
alert("Pls tell me youre working...");
}<html>
<body>
<div class="text-box">
<h1>BLOG</h1>
</div>
<div class="buttons">
<button id="play"> OK </button>
</div>
<script src="music-player/scripts/app.js"></script>
</body>
</html>
回答 3
Stack Overflow用户
发布于 2022-10-02 07:08:22
因为这会导致Maximum call stack size，因为function中的alert不会引用默认的全局alert，而会引用函数本身，这会产生无穷大的递归，因此需要更改函数名。
const btn = document.getElementById("play");
btn.addEventListener("click", alertMessage);
function alertMessage()
{
alert("Pls tell me youre working...");
}<div class= "buttons">
<button id="play"> OK </button>
</div>
<script src="music-player/scripts/app.js"></script>
如果您使用window.alert()并使用函数表达式，而不是函数声明(该声明覆盖全局警报)，那么它会正常工作，但是为了防止冲突，最好更改function名称。
const alert = () =>
{
window.alert("Pls tell me youre working...");
}
const btn = document.getElementById("play");
btn.addEventListener("click", alert);<div class= "buttons">
<button id="play"> OK </button>
</div>
<script src="music-player/scripts/app.js"></script>
Stack Overflow用户
发布于 2022-10-02 07:07:40
更新功能名称：
const btn = document.getElementById("play");
btn.addEventListener("click", alertMessage);
function alertMessage() {
alert("Pls tell me youre working...");
}<html>
<body>
<div class="text-box">
<h1>BLOG</h1>
</div>
<div class="buttons">
<button id="play"> OK </button>
</div>
<script src="music-player/scripts/app.js"></script>
</body>
</html>
Stack Overflow用户
发布于 2022-10-02 07:07:06
将函数的名称从onClick="function()"警报更改为其他，或者可以直接在按钮标记中添加
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73923963
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号