external javascript file and function not working

Question

I am new to javascript. I was trying to make a message box popup onload. As i am beginner i copied the code from internet just to see how it works but for some reason the pop is not showing up. I know the code is not worng because it is wrking in the video. the calling method is a bit different as i am using django.

console error

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

html code

{% 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 code

const popup = document.querySelector('.popup');
window.onload = function(){
 setTimeout(function(){
 popup.style.display = "block"
 // add some time delay o show
 }, 2000)
}

• kamran890: Load js after html is loaded.
• jirarium: The error means that popup variable is null .You can always try portions of Javascript directly on the browser console , like document.querySelector('.popup') . So maybe you need to include that declaration inside setTimeout function .
• Ritankar Bhattacharjee: @kamran890, the html is already loading, this is how actually a django template works other js file is working only not this
• Ritankar Bhattacharjee: @jirarium, but why is it showing null when the code is absolutely working fine in the video from whom i have learnt this

Answer 1

You need to load js file after html:

{% 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 %}

• Ritankar Bhattacharjee: thank you so much now it is working. thank you for the help

Answer 2

the syntax s document.querySelector(Selector) I do not think .popup is a selector from your listing.

• Ritankar Bhattacharjee: thank you so much, now it is working fine kamran's advice worked for me