Javascript 为什么document.getElementById不起作用？

我在一个营地网站上工作，这个ejs文件显示了营地和要删除的选项。我想添加一个功能，在营地或评论被实际删除之前发出警报。下面的代码以前运行良好，但后来我决定在用户按下删除按钮时添加警报消息。所以我添加了代码：

    <%var button=document.getElementById("delete");
button.addEventListener("click",function(){
alert("Are you sure?");
})%>

到我的ejs文件：

<%- include ("../partials/header.ejs") %>

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <p class="lead">
                YelpCamp
            </p>
            <div class="list-group">
                <li class="list-group-item active"> Item 1</li>
                <li class="list-group-item"> Item 2</li>
                <li class="list-group-item"> Item 3</li>
            </div>
        </div>
        <div class="col-md-9">
            <div class="thumbnail">
                <img class="img-responsive" src="<%=campground.url%>">
                <div class="caption-full">
                    <h4 class="pull-right">
                     Rs. <%=campground.price%>/Night
                    </h4>
                    <h4>
                        <a href=""><%=campground.name%></a>
                    </h4>
                    <p>
                        <em>Created by <%=campground.author.username%></em>
                    </p>
                    <span class="pull-right">
                        <%if(!currentUser)
                        ;
                    else {
                    if(currentUser.username==campground.author.username){%>
                    <a class="btn btn-xs btn-warning" href="/campgrounds/<%=campground._id%>/edit">Edit </a>
                    <form style="display:inline"action="/campgrounds/<%=campground._id%>?_method=DELETE" method="POST">
                        <button class="btn btn-danger btn-xs" id="delete">Delete</button>
                    </form>
                    <%}}%>
                    </span>
                    <p>
                        <%=campground.description%>
                    </p>
                </div> 
            </div>
            <div class="well">
                
                <span class="pull-right">
                    <a class="btn btn-success" href="/campgrounds/<%=campground._id%>/comments/new"> Add new comment!</a>
                </span>
                <h4>
                    Comments:
                </h4>
                <hr>
                <% campground.comments.forEach(function(comment){%>
                <div class="row">
                    <div class="col-md-12">
                        <strong> <%=comment.author.username%></strong>
                        <span class="pull-right">
                            10 days ago
                        </span>
                        <br>
                        <span class="pull-right">
                        <%if(currentUser && currentUser._id.equals(comment.author.id)){%>
                        <a href="/campgrounds/<%=campground._id%>/comments/<%=comment._id%>/edit" class="btn btn-xs btn-warning">Edit</a>
                        <form style="display:inline"                                                                                     action="/campgrounds/<%=campground._id%>/comments/<%=comment._id%>?_method=DELETE" method="POST">
                        <button class="btn btn-danger btn-xs" id="delete" >Delete</button>
                    </form>
                        <%}%> 
                        </span>
                        <p>
                            <%=comment.text%>
                        </p>
                        <hr>
                    </div>
                </div>
                <%});%>
            </div>
        </div>
    </div>
</div>
 <%var button=document.getElementById("delete");
button.addEventListener("click",function(){
alert("Are you sure?");
})%>
<a href="/campgrounds"> Go back!</a>
<%- include ("../partials/footer.ejs")%>

耶尔普坎普

项目1
第2项
第3项
">
卢比/夜

创建人

删去


评论：


十天前


删去

---

这只是我整个项目中的一个文件。但当我运行此页面时，它会显示文档未定义的错误？

它正在尝试在模板中执行

document.getElementById

，而不是在浏览器中。当浏览器获得它时，它已经被放大了。

它正在尝试在中执行

document.getElementById

您的模板，而不是在浏览器中。当浏览器获取模板时，它已经被放大。

请记住，模板是在服务器上创建/解析的（通过

res.render（…）

）。要解决此问题，您只需在将在浏览器中执行的模板中包含

：

<!-- rest of the ejs-template -->
<script> 
var button=document.getElementById("delete");
button.addEventListener("click",function(){
   alert("Are you sure?");
});
</script>

var按钮=document.getElementById（“删除”）；
addEventListener（“单击”，函数（）{
警惕（“你确定吗？”）；
});

请记住，模板是在服务器上创建/解析的（通过

res.render（…）

）。要解决此问题，您只需在模板中包含一个

，该模板将在浏览器中执行：

<!-- rest of the ejs-template -->
<script> 
var button=document.getElementById("delete");
button.addEventListener("click",function(){
   alert("Are you sure?");
});
</script>

var按钮=document.getElementById（“删除”）；
addEventListener（“单击”，函数（）{
警惕（“你确定吗？”）；
});

这是客户端代码；但您正试图在ejs解析文件的上下文中执行它。

文档是浏览器中的对象，它在ejs解析您的模板时不存在。因此，当用户尝试按delete按钮时，我如何提醒用户？您的代码或多或少都很好（除非您可能希望使用
confirm（）
而不是alert），但您需要以一种使expess/ejs将其发送到浏览器而不是执行它的方式插入它。这是客户端代码；但您正试图在ejs解析文件的上下文中执行它。
document
是浏览器中的对象，它在ejs解析您的模板时不存在。因此，当用户试图按delete（删除）按钮？您的代码大致正常（除了您可能希望使用
confirm（）
而不是alert），但您需要以一种方式插入它，使expess/ejs将其发送到浏览器，而不是执行它。您好，谢谢，现在它没有给出错误，但这似乎不起作用。当我按“删除”按钮时，它不会给我任何提示您需要将脚本放在模板末尾，或者等待加载文档（请参阅）并在
DOMContentLoaded
回调函数中定义按钮侦听器。@Nandz请针对您遇到的新问题发布一个新问题。您好，谢谢，现在它没有给出错误，但似乎不起作用。当我按delete按钮时，它不会给我任何提示。您需要将脚本放在模板末尾，或者等待要加载文档（请参阅）并在
DOMContentLoaded
回调中定义按钮侦听器。@Nandz请针对遇到的新问题发布新问题。