Почему не работает document.getElementById? - PullRequest
Новая
       32

Почему не работает document.getElementById?

1 голос
/ 02 августа 2020

Я работаю над веб-сайтом для кемпинга, и в этом файле e js показан кемпинг и варианты его удаления. Я хотел добавить функцию оповещения перед фактическим удалением кемпинга или комментария. Этот код ниже работал нормально раньше, но затем я решил добавить предупреждающее сообщение всякий раз, когда пользователь нажимает кнопку удаления. Поэтому я добавил код: 

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

в свой файл e js: 

<%- 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")%>

Это всего лишь один файл из всего моего проекта. Но когда я запускаю эту страницу, она показывает ошибку, что документ не определен?

Ответы [ 2 ]

2 голосов
/ 02 августа 2020

Он пытается выполнить document.getElementById в вашем шаблоне , а не в браузере. К тому времени, как браузер получает это, он уже взорван.

1 голос
/ 02 августа 2020

Помните, что шаблон создается / анализируется на сервере (через res.render(...)). Чтобы обойти это, вы можете просто включить <script> в шаблон, который будет выполняться в браузере: 

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