CODEWITHSUNDEEP
javascripthtmldjango
Ritankar Bhattacharjee
Ritankar Bhattacharjee

Reputation: 766

external javascript file and function not working

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)
}

Upvotes: 0

Views: 1125

Answers (2)

kamran890
kamran890

Reputation: 842

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

Upvotes: 1

karim sharif
karim sharif

Reputation: 1

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

Upvotes: 0

Related Questions