My javascript is running in the console, but returns an error if I run it through html

Question

I have some javascript code here, that randomly changes the background of the landing page of my website. This is the code:

    var bigSize = [ 
                    "url('assets/bg/front1.jpg')",
                    "url('assets/bg/front2.jpg')",
                  ];
    var random = Math.floor(Math.random() * 2) + 0;
    document.getElementById("front").style.backgroundImage=bigSize[random];

When I load the page and take a look at my console, it gives the following error:

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

However, when I run the exact code through the console, the script works perfectly. Can anyone help me with this? Thanks in advance!

`document.getElementById("front")` is `null`. Can you ensure if this element exists on the page **when this script is running**? — 31piy, Apr 17 '18 at 09:16
Put the script at the end of the body tag, not before your front element — GSSwain, Apr 17 '18 at 09:17
You're running that script *before* you define `id="front"`…!? — deceze, Apr 17 '18 at 09:17

score 0 · Accepted Answer · answered Apr 17 '18 at 09:17

0

The problem might be that you're inserting the script tag before the body tag. Insert the script tag after the body tag. Javascript is not able to find your element, it means it hasn't been rendered to the browser yet and when you're accessing it, it is throwing an error.

answered Apr 17 '18 at 09:17

Ajay Gaur

4,400
4
31
49

Thats it! Thank you very much! – Tom Rassaerts Apr 17 '18 at 09:35
Please upvote and mark as correct if you feel this is right :) – Ajay Gaur Apr 17 '18 at 14:31

My javascript is running in the console, but returns an error if I run it through html

1 Answers1