Help with clicking buttons on a webpage

INSERT-USER_NAME

I need help with making buttons on a webpage do things when clicked.
I tried “addEventListener(click, onClick);” but it activates when i click anywhere on the page, not just one button, how do i specify that only one button should trigger an event?

To hopefully help understand a tiny bit more, here's the webpage:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My webpage</title>
    </head>
    <style>
        body {
            text-align: center;
            font-family: cursive;
            background: rgb(160, 200, 255);
        }
    </style>
    <body>
        <h1>My webpage</h1>
        <p id="intro">
            This is my webpage, I'm making this to test my HTML and CSS skills, maybe even some JS too!
        </p>
        <p id="moreInfo">
            There'll be several things here, including possibly a tiny clicker game in the webpage.
        </p>
        <p>
            For now though, there'll just be a bunch of basic tags like the <i>italicize</i> tag or the <b>bold</b> tag.<br>
            <marquee>Maybe even some scrolling text too...</marquee>
            Or even this cool little thing that I may have taken from MDN Web Docs
            <marquee
            direction="up"
            width="360"
            height="240"
            behavior="alternate"
            style="border:solid"
            ><marquee behavior="alternate">DVD</marquee></marquee><br>
            But for now, that's all.<br>
            To finish off, here's a button:<br>
            <button id="button">Click here</button>
        </p><br>
        <p>
            That's not all though, here's a simple little clicker game too:
        </p><br>
        <p>
        Current cash: <span class="clicker" id="cashCount">none</span><br>
            Current upgrade cost: <span class="clicker" id="upgdCost">none</span><br>
            Current cash per click: <span class="clicker" id="cashClick">none</span><br>
            <button class="clicker" id="getCash">Get Cash</button><br>
            <button class="clicker" id="upgdButton">Buy Upgrage</button><br>
            <span class="clicker" id="warningSpan">Clicker is in development</span>
        </p>
        <script>
        var clickCount = 0;
        var buttonEl = document.getElementById("button");
            var onClick = function() {
                clickCount += 1;
                buttonEl.textContent = "Clicks: " + clickCount;
            };
        addEventListener("click", onClick);
        
        var elCash = document.getElementById("cashCount");
        var elUpgdCost = document.getElementById("upgdCost");
        var clickerCash = 0;
        var clickerUpgd = 50;
        var clickerCashClick = 1;
        elCash.textContent = clickerCash;
        elUpgdCost.textContent = clickerUpgd;
        </script>
    </body>
</html>

consider posting here maybe?
hey guys

Arctenik

You can add the event listener to just the button by calling the button's addEventListener method:

buttonEl.addEventListener("click", onClick);

In your current code, “addEventListener” is a global variable that adds an event listener to the whole page (specifically, this is because global variables are also properties of the window object, so when you call addEventListener you're calling the window's addEventListener method)

Previously known as @Zatnik

Discuss Scratch