document.getElementById не работает в зависимости от того, когда я размещаю div, к которому я обращаюсь - PullRequest
Новая
       32

document.getElementById не работает в зависимости от того, когда я размещаю div, к которому я обращаюсь

0 голосов
/ 08 января 2019

Я пытаюсь скрыть элемент div при нажатии кнопки. У меня есть следующий HTML-код (возможно, я сообщаю о слишком большом количестве кода, но я не уверен, что это может быть полезным, рассмотрите три комментария, которые я добавил к коду). 

<!-- HOME DIV -->
<div class="home" style="height: 100vh;">
<div class="home_slider_container" style="height: 100vh">
    <div class="owl-carousel owl-theme home_slider">
        <div class="owl-item home_slider_item">
            <div class="home_slider_background" style="background-image:url( {% static 'images/home_slider_1.jpg' %})"></div>
            <div class="home_slider_content_container">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div style="text-align: center; bottom: 60px;">
                                <div class="home_slider_title">CASTELLO</div>
                                <div class="home_slider_subtitle">Acquista nella tua città.</div>
                                <div class="newsletter_form_container" style="margin-top: 130px;">
                                    <form action="#" id="newsletter_form" class="newsletter_form">
<!-- BELOW IS THE DIV TO BE HIDDEN -->  
                                        <div id="myDIV" style="display: block;">CIAO</div>

<!-- BELOW IS THE BUTTON TO HIDE THE DIV -->
                                        <div class="button button_light home_button" style="display: inline-block;" onclick="show()"><a>Trova</a></div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

У меня есть следующая функция JavaScript: 

function show() {
var x = document.getElementById("myDIV");
console.log(x.style.display)
x.style.display = "none";
console.log(x.style.display)

}

Когда я нажимаю кнопку, я вижу на консоли, что свойство display меняется с «block» на «none», как и должно быть, но на веб-странице ничего не происходит, div «myDiv» не исчезает. Только если я поместил div myDiv вне div home, он будет работать правильно! Почему DOM обновляется с правильным свойством «display», только когда я помещаю div «myDiv» в какое-то место на странице?

Большое спасибо.

1 Ответ

0 голосов
/ 08 января 2019

Я попробовал ваш код, и он отлично работает, когда я размещаю часть JavaScript ниже тега end тела (). Я нажал Trova, и myDiv исчез, как и ожидалось. 

function show() {
var x = document.getElementById("myDIV");
console.log(x.style.display)
x.style.display = "none";
console.log(x.style.display)}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
  background-color: black;
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

<div class="home" style="height: 100vh;">
<div class="home_slider_container" style="height: 100vh">
    <div class="owl-carousel owl-theme home_slider">
        <div class="owl-item home_slider_item">
            <div class="home_slider_background"></div>
            <div class="home_slider_content_container">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div style="text-align: center; bottom: 60px;">
                                <div class="home_slider_title">CASTELLO</div>
                                <div class="home_slider_subtitle">Acquista nella tua città.</div>
                                <div class="newsletter_form_container" style="margin-top: 130px;">
                                    <form action="#" id="newsletter_form" class="newsletter_form">
<!-- BELOW IS THE DIV TO BE HIDDEN -->  
                                        <div id="myDIV" style="display: block;">CIAO</div>

<!-- BELOW IS THE BUTTON TO HIDE THE DIV -->
                                        <div class="button button_light home_button" style="display: inline-block;" onclick="show()"><a>Trova</a></div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
...