Learn

A useful interaction checks what someone entered before deciding how to respond. This lesson connects an HTML input and button to JavaScript: read the current value, remove surrounding spaces, check whether anything remains, then display one helpful message. The starter already greets a name; your challenge is to handle a missing name too.

Walkthrough: why the code works

1. Connect the HTML elements

   The label has for="name", matching the input's id="name", so it labels that field. JavaScript uses the ids greet and greeting to find the button and output paragraph. The paragraph starts empty. Its aria-live="polite" attribute lets assistive technology announce updated text without interrupting the current announcement.

   <label for="name">Your first name</label>
   <input id="name">
   <button id="greet">Say hello</button>
   <p id="greeting" aria-live="polite"></p>

2. Wait for a click, then read the current input

   addEventListener("click", function () { ... }) registers a function to run when the button is clicked. The code inside the braces does not run just because you type. Reading the value inside this function means each click uses the latest input. The script comes after the HTML elements so they exist when JavaScript looks for them.

3. Turn the input into a value you can check

   getElementById("name") finds the input; .value reads its text. .trim() returns that text without spaces at either end. For example, " Sam " becomes "Sam", and spaces alone become "", an empty string. Spaces inside a name remain. const name stores the trimmed text for this click. It does not rewrite what is visible in the input field.

   const name = document.getElementById("name").value.trim();
   const output = document.getElementById("greeting");

4. Follow the starter before improving it

   output refers to the paragraph. In the starter, "Hello, " + name + "!" joins three pieces of text. With Sam it makes Hello, Sam! Assigning that result to textContent replaces the paragraph's text. An empty name still produces Hello, ! because the starter has no condition yet.

   output.textContent = "Hello, " + name + "!";

5. Choose one response with if and else

   Your challenge adds a check after the two const lines, inside the click function. name === "" asks whether the trimmed name is exactly an empty string. If true, run the first block and ask for a name. Otherwise, run the else block and greet the person. Only one block runs per click. Replace the starter's unconditional greeting line with your if/else; use the hint and sample answer below if you get stuck.

6. Display the message as plain text

   Use output.textContent in both branches. It treats a typed value as text rather than interpreting it as HTML. Each click replaces the previous message, so a visitor can correct an empty entry and try again without reloading.

Expected results

• In the unmodified starter, the output is blank until you click Say hello. Sam gives Hello, Sam! An empty or spaces-only entry gives Hello, ! This missing-name behaviour is what you will improve.

• After your change, choose Run Code, leave the field empty, and click Say hello. Expected message: Please enter a name.

• Enter several spaces and click again. Expected message: Please enter a name. trim() makes the spaces-only value empty.

• Enter Sam and click. Expected message: Hello, Sam! Try spaces before and after Sam: the greeting stays Hello, Sam! because the stored value is trimmed.

• Change Sam to Alex and click again. Expected message: Hello, Alex! Then clear the field and click: the helpful missing-name message should return. These checks confirm that every click reads the current value.

Common mistakes and how to fix them

• Using = instead of === in the condition: The comparison name === "" asks a question. A single = assigns a value; it is not an equality check. Here, trying to reassign const name would also cause an error.

• Checking before removing spaces: A string containing spaces is not the empty string. Keep .trim() before storing and checking name so a spaces-only entry reaches the helpful-message branch.

• Reading the input outside the click function: That reads the value once when the script runs. Keep the name assignment inside the click function to read what the visitor entered on each click.

• Leaving the old greeting after the if/else: A later output.textContent assignment overwrites the message you just chose. Replace the starter's greeting assignment rather than adding a second unconditional greeting after the condition.

• A click appears to do nothing: After editing, choose Run Code, then click Say hello in the preview. Check that name, greet and greeting match the HTML ids exactly, including letter case. Check quotes, parentheses and braces against the starter, and keep the script after the elements it uses.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My hobby page</title>
    <style></style>
  </head>

  <body>
    <label for="name">Your first name</label>
    <input id="name">
    <button id="greet">Say hello</button>
    <p id="greeting" aria-live="polite"></p>
    <script>
      document.getElementById("greet").addEventListener("click", function () {
        const name = document.getElementById("name").value.trim();
        const output = document.getElementById("greeting");
        output.textContent = "Hello, " + name + "!";
      });
    </script>
  </body>
</html>

Your challenge

Show “Please enter a name” when the input is empty. Otherwise show a greeting.

Keep developing your hobby page: Download HTML before leaving the sandbox, then choose Open HTML file when returning to your project. Load saved draft restores only this lesson’s draft in this browser.

if (name === "") {
  output.textContent = "Please enter a name.";
} else {
  output.textContent = "Hello, " + name + "!";
}

Check your work

An empty or spaces-only name gets a helpful message; a name gets a greeting.

Completion is your own check, not an automatic grade.