JavaScript · Lesson 4 of 4

Add interaction to your page

Bring your greeting, counter, and introduction toggle together on your personal page. Review the handlers you built, or write them if you started here.

Your task

Make all three handlers work on your page: your own greeting, a counter increase, and showing or hiding your introduction. Refine the messages and test each button more than once.

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.js
        Edit your project HTML and CSS
            HTML · index.html<h1>Sara</h1>
<button id="greet">Say hello</button>
<p id="message"></p>
<button id="count">Add a click</button>
<p id="total">0</p>
<button id="toggle">Show my introduction</button>
<p id="details" hidden>I’m learning to build websites.</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.

Do all three buttons work, and can you explain the code? Download your complete page, then continue to the next stage.

Next: Modern Interfaces

I need help

Start with one button. The greeting uses greet and message, the counter uses count and total, and the introduction uses toggle and details. Revisit earlier lessons to check each handler.

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