外部javascript文件和功能不起作用

Question

我是 javascript 新手。 我試圖在加載時制作一個消息框彈出窗口。 由於我是初學者，我從互聯網上復制了代碼只是為了看看它是如何工作的，但由於某種原因，pop 沒有出現。 我知道代碼沒有磨損，因為它在視頻中。 調用方法有點不同，因為我使用的是 django。

控制台錯誤

auto.js:6 Uncaught TypeError: Cannot read property 'style' of null

html代碼

{% block content %}
<script type="text/javascript" src="{% static 'auto.js' %}"></script>

<div class="popup">
    <div class="contentBox">
        <div class="close"></div>
        <h3 style="color: oldlace;">TESTING POPUP</h3>

    </div>
</div>
{% endblock %}

代碼

const popup = document.querySelector('.popup');

window.onload = function(){
  setTimeout(function(){
    popup.style.display = "block"

    // add some time delay o show

  }, 2000)
}

Answer 1

你需要在html之后加載js文件：

{% block content %}
<div class="popup">
    <div class="contentBox">
        <div class="close"></div>
        <h3 style="color: oldlace;">TESTING POPUP</h3>

    </div>
</div>

<script type="text/javascript" src="{% static 'auto.js' %}"></script>
{% endblock %}

Answer 2

語法 s document.querySelector(Selector) 我不認為 .popup 是您列表中的選擇器。