外部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 %}

javasript代码

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(选择器)我不认为.popup是清单中的选择器。