时间戳

首页 > 解决方案 > DOM 操作（点击事件不工作）

javascript - DOM 操作（点击事件不工作）

问题描述

我已经构建了一个快速应用程序并且它运行良好，在最后阶段我想添加一些警报消息以在单击某些按钮时弹出。但是我的警报甚至没有点击就弹出，加载包含按钮的页面的那一刻弹出显示

在我的index.js文件中，我有一个用于删除的表单按钮

<form
    action="/grades/<%=grade._id%>?_method=DELETE"
    method="POST"
    class="delete-form"
>
    <input
        type="submit"
        class="btn btn-danger mt-3"
        value="Delete Class"
        id="delBtn"
    >
</form>

我已经delBtn为按钮提供了 ID，在我的内部我main.js有

var delBtn = document.querySelector('#delBtn');
delBtn.addEventListener('click', alert('Button Clicked'));

我怎样才能让它正常工作..

标签： javascripthtmldom

解决方案

这条线是问题所在。你alert马上打电话。

delBtn.addEventListener('click', alert('Button Clicked'));

它的行为就像这样

alert('Button Clicked');
delBtn.addEventListener('click', undefined);

该addEventListener函数需要一个字符串和一个函数，但您没有传入函数，但undefined因为这是alert函数返回的内容。

所以你只需要这个

delBtn.addEventListener('click', function(){ 
    alert('Button Clicked');
});

推荐阅读