DOM Manipulation

Previous Lesson
Next Lesson

Lesson 6: Handling User Input

DOM Manipulation Lesson 6: Handling User Input

Learning Objectives

By the end of this lesson, learners will be able to:

  • Read values entered into <input> and <textarea> elements using JavaScript
  • Validate input to check if it’s empty or meets specific criteria
  • Display or use user-provided data by updating the DOM
  • Build a small interactive feature that reacts to user input

Why Handle User Input?

Almost every interactive website asks users to type something:

  • Search bars
  • Forms (e.g. login, contact, feedback)
  • Comments and chats
  • Custom data entry (e.g. to-do lists)

To make web pages truly interactive, you need to read, validate, and respond to user input using JavaScript.

1. Reading Values from <input> and <textarea>

To read what a user typed, you use the .value property.

Example:

HTML:

<input type="text" id="name-input" placeholder="Enter your name" />
<textarea id="message-input" placeholder="Your message..."></textarea>

JavaScript:

let name = document.getElementById("name-input").value;
let message = document.getElementById("message-input").value;

The value is whatever the user typed in at that moment.
You usually read it inside an event handler (like when a button is clicked).

2. Validating User Input (Basic Checks)

Before using input, check if it’s valid (not empty, not a number, etc.)

Basic Validation Examples:

if (name === "") {
  alert("Please enter your name.");
}

if (!isNaN(name)) {
  alert("Name cannot be a number.");
}

You can also use .trim() to remove extra spaces:

if (name.trim() === "") {
  alert("Name is required.");
}

Advanced validation (like regex or HTML5 constraints) is introduced in later modules.

3. Updating the DOM with User Input

Once the input is validated, you can use it to update other elements.

Example:

HTML:

<input type="text" id="username" placeholder="Your name" />
<button id="greet-btn">Greet</button>
<p id="greeting"></p>

JavaScript:

let input = document.getElementById("username");
let button = document.getElementById("greet-btn");
let greeting = document.getElementById("greeting");

button.addEventListener("click", function () {
  let name = input.value.trim();

  if (name === "") {
    greeting.textContent = "Please enter your name.";
    greeting.style.color = "red";
  } else {
    greeting.textContent = "Hello, " + name + "!";
    greeting.style.color = "green";
  }
});

This shows how to:

  • Read input
  • Validate it
  • Show a result dynamically on the page

Practice Challenge

HTML:

<input type="text" id="favorite-color" placeholder="Enter your favorite color" />
<button id="show-color">Show Color</button>
<p id="color-output"></p>

Task:

  • Read the value from the input when the button is clicked
  • If it’s empty, show a warning
  • If not, update the paragraph to say: “Your favorite color is [color]”

JavaScript:

let input = document.getElementById("favorite-color");
let button = document.getElementById("show-color");
let output = document.getElementById("color-output");

button.addEventListener("click", function () {
  let color = input.value.trim();

  if (color === "") {
    output.textContent = "Please enter a color.";
    output.style.color = "red";
  } else {
    output.textContent = "Your favorite color is " + color + ".";
    output.style.color = color; // Try to use it as a text color!
  }
});
Previous Lesson
Back to Tutorial
Next Lesson