為什么 document.getElementById 不起作用？

Question

我正在開發一個露營地網站，這個 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")%>

這只是我整個項目中的一個文件。 但是當我運行這個頁面時，它顯示文檔未定義的錯誤？

Answer 1

它試圖在您的模板中執行document.getElementById ，而不是在瀏覽器中。 當瀏覽器得到它時，它已經被炸毀了。

Answer 2

請記住，模板是在服務器上創建/解析的（通過res.render(...) ）。 為了解決這個問題，您可以簡單地在模板中包含一個<script> ，它將在瀏覽器中執行：

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