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

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 . — jirarium
– jirarium, Commented Jul 29, 2021 at 20:29
@kamran890, the html is already loading, this is how actually a django template works other js file is working only not this — Ritankar Bhattacharjee
– Ritankar Bhattacharjee, Commented Jul 29, 2021 at 20:29
@jirarium, but why is it showing null when the code is absolutely working fine in the video from whom i have learnt this — Ritankar Bhattacharjee
– Ritankar Bhattacharjee, Commented Jul 29, 2021 at 20:32

kamran890 · Accepted Answer · 2021-07-29 20:31:31Z

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

answered Jul 29, 2021 at 20:31

kamran890

8425 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ritankar Bhattacharjee Over a year ago

thank you so much now it is working. thank you for the help

karim sharif · Accepted Answer · 2021-07-29 20:30:33Z

0

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

answered Jul 29, 2021 at 20:30

karim sharif

11 bronze badge

1 Comment

Ritankar Bhattacharjee Over a year ago

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

Collectives™ on Stack Overflow

external javascript file and function not working

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related