Cannot read property of null in HTML and JavaScript

Question

I am new to JS. I was trying to make a button which will change the BG color of the HTML page. This is HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="js/index.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn btn-outline-secondary">Click Me!</button>
</body>
</html>

and here is the JS:

const button = document.querySelector('button');
const body = document.querySelector('body');
const colors = ['red', 'green', 'blue', 'yellow', 'pink', 'purple'];

body.style.backgroundColor = 'violet';
button.addEventListener('click', changeBackground);

function changeBackground(){
const colorIndex= parseInt(Math.random()*colors.length);
body.style.backgroundColor = colors[colorIndex];
}

this code is not working and it is constantly giving error on console

index.js:5 Uncaught TypeError: Cannot read property 'style' of null

works: https://jsfiddle.net/e1mdu8h2/. bod your script below the body — EugenSunic, Apr 28 '20 at 20:34

EugenSunic · Accepted Answer · 2020-04-28T20:51:19.077

0

Put your script to execute after your body loaded

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn btn-outline-secondary">Click Me!</button>
    <script src="js/index.js"></script>
</body>

</html>

edited Apr 28 '20 at 20:51

answered Apr 28 '20 at 20:35

EugenSunic

13,162
13
64
86

so it worked for few minutes. Now i tried to check if it works correctly, it is again giving me the same error. – Apr 28 '20 at 20:48
it should work, place it inside the body at the end – EugenSunic Apr 28 '20 at 20:51

Cannot read property of null in HTML and JavaScript

1 Answers1