My button is not responding to my event listener?-CodePudding

Below is my code. I am trying to generate a random hex color that will replace the background color when my button is clicked but I can't get it to work.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Color Changer</title>
    </head>
    <body>
        <h1>
            <button id="newColor">Click Me</button>
        </h1>
    </body>
</html>

scripts.js

const btn = document.getElementById("newColor");

btn.addEventListener("click", function onClick(event) {
    let randColor = "#"   Math.floor(Math.random()*16777215).toString(16);
    document.body.style.backgroundColor = randColor;
});

CodePudding user response：

include your js file to html file :

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Color Changer</title>
        <script src="scripts.js"></script>
    </head>
    <body>
        <h1>
            <button id="newColor">Click Me</button>
        </h1>
        // or include here
        //<script src="scripts.js"></script>
    </body>
    </html>

can use event onload of js same as :

window.onload = function () {
    const btn = document.getElementById("newColor");
    btn.addEventListener("click", function onClick(event) {
        let randColor = "#"   Math.floor(Math.random()*16777215).toString(16);
        document.body.style.backgroundColor = randColor;
    });
};

can use jquery with $( document ).ready()

CodePudding user response：

the code is working is your js code is after the HTML tag?

const btn = document.getElementById("newColor");

btn.addEventListener("click", function onClick(event) {
    let randColor = "#"   Math.floor(Math.random()*16777215).toString(16);
    document.body.style.backgroundColor = randColor;
});

        <h1>
            <button id="newColor">Click Me</button>
        </h1>