JavaScript · Lesson 2 of 4

Count button clicks

let keeps a number you can change. Increase it on each click, then display it. Running the code again starts the counter at zero.

Your task

Change the increase from 1 to 2. Run the code and click three times. What number appears?

Each new lesson builds on your personal page. Your saved lesson draft opens when you return.

Choose an image from your computer

The image stays in your browser. Choose it, then use its filename when you add the image to your code.

        JavaScript · script.jslet clicks = 0;
document.getElementById("count")
  .addEventListener("click", () => {
    clicks = clicks + 1;
    document.getElementById("total")
      .textContent = clicks;
  });
        Edit your project HTML and CSS
            HTML · index.html<h1>Click counter</h1>
<button id="count">Add a click</button>
<p id="total">0</p>
            CSS · style.cssbody { font-family: sans-serif; padding: 16px; color: #12211f; background: #fcfbf7; } h1 { font-size: 24px; } button { font: inherit; padding: 6px 12px; color: #fff; background: #0c4b3c; border: 0; border-radius: 6px; cursor: pointer; }
        
    

Your page

Checks use your current code. Try the page yourself too.

Did you get 6? Restore the increase to 1 and try again, then move on to showing details.

Next: Show details

I need help

Change the number in clicks + 1; leave clicks = 0. “Run code” resets the counter, while the button in the result increases it.

More explanation

Save the page to your computer

Download the HTML file

If the download does not start, copy the complete code below into a text file named index.html and save it as UTF-8.

Complete code to save

Your task

Your page

Your feedback