I don't understand why my code isn't working

Question

I have just started learning javascript and have made a small little program to create an alert when a button is clicked, yet it doesn't work and I'm not sure why.

Here is my code:

<html>
<head>
    <style>
        body {
            background-color: grey;
            color: white;
        }
    </style>
    <script>
        const some_action = () => {
            window.alert("hi")
        }
        document.getElementById("btn").addEventListener("click", some_action)
    </script>
</head>
<body>
    <p>
        <button id="btn">click me</button>
    </p>
</body>

</html>

The script is being executed before the button has been initialized in the body. — nah0131, Feb 24 '22 at 08:58
Get used to opening the browser's debugger console, and you'd see a more useful error message that you can use for your own research. — deceze, Feb 24 '22 at 09:01

score -2 · Answer 1 · edited Feb 24 '22 at 09:06

Or, alternatively, you could do a delegated event attachment:

<html>
<head>
    <style>
        body {
            background-color: grey;
            color: white;
        }
    </style>
    <script>
        const some_action = ev => {
            if (ev.target.id === "btn") window.alert("hi")
        }
        document.addEventListener("click", some_action)
    </script>
</head>
<body>
    <p>
        <button id="btn">click me</button>
    </p>
</body>
</html>

I don't understand why my code isn't working

1 Answers1