Comment form skeleton

Build the comment form with addEventListener and DOM.

Form skeleton

The comment form has a textarea and a submit button. We'll listen for the form's submit event and prevent the default behavior.

addEventListener("submit", ...) runs when the form is submitted. event.preventDefault() stops the page from reloading.

Inside the handler we find the textarea with commentForm.querySelector("#commentText") and read its text with .value.

Reading the input value

Inside the form handler we select the textarea with querySelector. The .value property gives the text the user typed.

Example: const text = commentInput.value;

We'll then pass the text to renderComment, which we'll write in the next lessons.

Exercise Add the submit listener

Add a submit listener on commentForm. Inside the handler call event.preventDefault(), find the #commentText input, read its text with .value, and call renderComment(text).

Show example solution

commentForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const commentInput = commentForm.querySelector("#commentText");
  const text = commentInput.value;
  renderComment(text);
});

Test yourself

Add the event listener

commentForm.addEventListener("____", (event) => { event.preventDefault(); });

Show answer

commentForm.addEventListener("submit", (event) => { event.preventDefault(); });

What does preventDefault do?
```
event.preventDefault();
```
- Prevents the default behavior of the event
- Reloads the page
- Clears the form
- Triggers the event
Show answer

Prevents the default behavior of the event — Correct! preventDefault stops the default behavior (page reload).
Match the form methods

addEventListener

Add event listener
preventDefault

Prevent default behavior
querySelector

Select element
value

Get input text

Next lesson: XSS-safe rendering

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies