Form Feedback: Read an Input and Answer Back

The previous lesson stored profile and skills as objects. This lesson reads what someone types into the contact form and answers on the page with a short thanks line.

The concept

Here is your page with the profile header and object-based skills. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <p class="tagline"></p>
      <button type="button" class="change-tagline btn">Change tagline</button>
      <button type="button" class="theme-toggle btn">Toggle theme</button>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul class="skill-row"></ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat" class="btn">GitHub</a> or connect on <a href="https://www.linkedin.com/in/example" class="btn">LinkedIn</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
    <script>
      function setTagline(text) {
        const tagline = document.querySelector(".tagline");
        tagline.textContent = text;
        tagline.classList.add("is-set");
      }
      function showAltTagline() {
        setTagline("Learning in public");
      }
      const profile = {
        name: "Your Name",
        tagline: "Building things for the web",
      };
      const heading = document.querySelector("h1");
      heading.textContent = profile.name;
      setTagline(profile.tagline);
      const changeButton = document.querySelector(".change-tagline");
      changeButton.addEventListener("click", showAltTagline);
      let theme = "light";
      function toggleTheme() {
        if (theme === "dark") {
          document.body.classList.remove("theme-dark");
          theme = "light";
        } else {
          document.body.classList.add("theme-dark");
          theme = "dark";
        }
      }
      const themeButton = document.querySelector(".theme-toggle");
      themeButton.addEventListener("click", toggleTheme);
      const skills = [
        { name: "HTML", role: "Structure" },
        { name: "CSS", role: "Look" },
        { name: "JavaScript", role: "Behaviour" },
      ];
      const skillRow = document.querySelector(".skill-row");
      for (const skill of skills) {
        const item = document.createElement("li");
        item.classList.add("skill-card");
        item.textContent = skill.name;
        skillRow.append(item);
      }
    </script>
  </body>
</html>

RUN TO SEE YOUR PAGE

The form still only collects. There is no feedback line yet. You will add one, then fill it from the name field.

Type a name and click Send:

READ .VALUE ON SUBMIT · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The page shows Thanks, plus the name you typed. The script read nameInput.value, built a string, and wrote it with textContent.

.value is the current text inside an input. It updates as the visitor types. You read it when you respond, here on submit.

"Thanks, " + nameInput.value joins two strings into one. The + between strings is concatenation: it builds one longer string from pieces.

When the browser calls your function on submit, it passes an object describing what happened. Naming a parameter (here event) receives that object, the same slot-filling as setTagline's text. You need that object so you can call event.preventDefault().

event.preventDefault() stops the browser's normal submit behaviour (send and reload) so your message can stay visible. This sandbox also catches submit so experiments stay safe. On a real page you still need preventDefault in your own handler if you want to keep control on the client.

Before your handler runs, the browser may still check the Email field. That is the same Part 1 check: type="email" can refuse submit and show a small message when the value lacks an @. Your thanks line only runs after that check lets the submit through.

The syntax

const contactForm = document.querySelector("form");
const nameInput = document.querySelector("#name");
const feedback = document.querySelector(".form-feedback");
 
function showThanks(event) {
  event.preventDefault();
  feedback.textContent = "Thanks, " + nameInput.value;
}
 
contactForm.addEventListener("submit", showThanks);

Read the field with .value.

+ joins two strings into one.

Listen for "submit" on the form.

Call preventDefault on the event before you update the page.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Thanks</title>
  </head>
  <body>
    <form>
      <label for="name">Name</label>
      <input type="text" id="name" name="name" />
      <button>Send</button>
    </form>
    <p class="form-feedback"></p>
    <script>
      const contactForm = document.querySelector("form");
      const nameInput = document.querySelector("#name");
      const feedback = document.querySelector(".form-feedback");
      function showThanks(event) {
        event.preventDefault();
        feedback.textContent = "Thanks, " + nameInput.value;
      }
      contactForm.addEventListener("submit", showThanks);
    </script>
  </body>
</html>

One form. One empty feedback element. One submit handler that reads .value and answers.

Common mistakes

You select .form-feedback before the element exists in the HTML. querySelector returns null. Setting textContent on submit throws. The CONSOLE shows a red error mentioning null. Add <p class="form-feedback"></p> in the contact section (for example after the form), then select it.

You read .value once while the script loads, not inside the handler. You type a name and submit. The feedback still shows Thanks, with nothing after the comma (or whatever was in the field at load). The variable captured the empty load-time string. Read nameInput.value inside showThanks, after the visitor has typed and submitted.

You submit with the name field empty. Run this and click Send without typing:

EMPTY FIELD, EMPTY NAME · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The line becomes Thanks, with nothing after the comma. That is value doing its job: the field held an empty string. Type a name and submit again to see the full message.

Try it yourself

Make the contact form answer with the name they typed. Confirm each step in the preview. After each Run, scroll the preview to Skills when you check the cards, and to Contact when you check the form. Both sit below the header and About.

Run the starting code below. Scroll the preview to Skills if you do not see it yet. Confirm the header still comes from profile, the skill cards still use skill.name, and the buttons still work. Scroll to Contact. Confirm there is no feedback line under the form yet.
After the </form> in the contact section, add <p class="form-feedback"></p>. Do not put text inside it yet. Run it. Scroll to Contact. Confirm an empty paragraph is in the markup (it may take little space until it has text).
In the script, select the contact form with document.querySelector("form"), the #name input, and .form-feedback. Write a showThanks function that takes event, calls event.preventDefault(), and sets the feedback textContent to "Thanks, " + nameInput.value (+ joins the two strings). Listen for "submit" on the form with showThanks (no parentheses on the name). Run it.
Scroll to Contact. Type a name, click Send, and confirm the feedback line shows Thanks, plus that name. Change the name and submit again. Confirm the line updates.
Break it on purpose: remove the feedback paragraph from the HTML while leaving the script. Run and submit. Confirm a red null error. Put the empty <p class="form-feedback"></p> back and confirm thanks works again.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

Your contact form now answers on the page. The next lesson counts skills on that page. The checkpoint after that shows the full responding profile in one place.