JavaScript · Lesson 1 of 4

Make a button change a message

getElementById finds an element by its ID. addEventListener connects a click to your instructions, and textContent changes the displayed text.

Your task

Change the greeting, run the code, then click the button in the result.

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.jsdocument.getElementById("greet")
  .addEventListener("click", () => {
    document.getElementById("message")
      .textContent = "Welcome to my page!";
  });
        Edit your project HTML and CSS
            HTML · index.html<h1>Sara</h1>
<button id="greet">Say hello</button>
<p id="message">Click the button to see the message.</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 your message appear after clicking? Move on to counting clicks.

Next: A counter

I need help

First change just the text between quotation marks. Run the code, then click “Say hello” in the result. greet must match the button’s ID in HTML.

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