CODEWITHSUNDEEP
javascripthtmlbutton
ION606
ION606

Reputation: 64

How do I make a button that adds 1 to a display every time it is clicked?

How do I make a button that adds one to a display every time it is clicked? (in HTML or Javascript please?)

I probably should clarify "display". I mean like a number that appears somewhere on the screen.

Is this possible?

Upvotes: 0

Views: 669

Answers (1)

Luís Ramalho
Luís Ramalho

Reputation: 10218

You can start with something like the following:

let count = 0;
button.addEventListener("click", () => {
  result.textContent = count + 1;
  count++;
});
<div id="result">0</div>
<button id="button">Add 1</button>

In order to make that work in the browser, create an HTML file, so like index.html and add the following content to it:

<!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>
    <div id="result">0</div>
    <button id="button">Add 1</button>
    <script>
      let count = 0;
      button.addEventListener("click", () => {
        result.textContent = count + 1;
        count++;
      });
    </script>
  </body>
</html>

Then you can open that file with the browser and it should be a good place to get started.

Upvotes: 1

Related Questions