JavaScript DOM Projects Practice Questions with Solutions

Introductions

JavaScript DOM projects are one of the best ways to move from basic JavaScript syntax to real browser development. Instead of only practicing individual methods, these projects combine DOM selection, events, functions, arrays, conditions, forms, and dynamic HTML.

In this chapter, you will build small beginner-friendly DOM projects step by step. Each project focuses on a practical feature that you can later use in larger JavaScript applications. JavaScript DOM Projects practice questions with solutions help to understand the concepts.

Question 1: Create a Button That Changes Text

Problem

Create a button that changes the text of a heading when the user clicks it.

Solution

<h1 id="heading">Hello JavaScript</h1>

<button id="changeBtn">Change Text</button>

<script>
    const heading = document.getElementById("heading");
    const button = document.getElementById("changeBtn");

    button.addEventListener("click", function() {
        heading.textContent = "JavaScript is Fun!";
    });
</script>

Output

Before clicking:

Hello JavaScript

[Change Text]

After clicking:

JavaScript is Fun!

[Change Text]

Step-by-step Explanation

First, select the heading:

const heading = document.getElementById("heading");

Then select the button:

const button = document.getElementById("changeBtn");

Add a click event:

button.addEventListener("click", function() {

Finally, change the heading:

heading.textContent = "JavaScript is Fun!";

This is one of the simplest examples of JavaScript controlling HTML.

Question 2: Build a Counter Project

Problem

Create a counter with Increase, Decrease, and Reset buttons.

Solution

<h2 id="count">0</h2>

<button id="increase">Increase</button>
<button id="decrease">Decrease</button>
<button id="reset">Reset</button>

<script>
    const countElement = document.getElementById("count");

    const increaseButton =
        document.getElementById("increase");

    const decreaseButton =
        document.getElementById("decrease");

    const resetButton =
        document.getElementById("reset");

    let count = 0;

    increaseButton.addEventListener("click", function() {
        count++;
        countElement.textContent = count;
    });

    decreaseButton.addEventListener("click", function() {
        count--;
        countElement.textContent = count;
    });

    resetButton.addEventListener("click", function() {
        count = 0;
        countElement.textContent = count;
    });
</script>

Output

Initially:

0

[Increase] [Decrease] [Reset]

After clicking Increase three times:

3

[Increase] [Decrease] [Reset]

Step-by-step Explanation

Create a variable:

let count = 0;

Increase it:

count++;

Decrease it:

count--;

Reset it:

count = 0;

After changing the value, update the HTML:

countElement.textContent = count;

This project teaches an important concept:

JavaScript data changes → DOM updates.

Question 3: Create a Light and Dark Mode Toggle

Problem

Create a button that switches the webpage between light mode and dark mode.

Solution

<style>
    .dark {
        background-color: #222;
        color: white;
    }
</style>

<h1>Theme Switcher</h1>

<button id="themeBtn">Toggle Theme</button>

<script>
    const button = document.getElementById("themeBtn");

    button.addEventListener("click", function() {
        document.body.classList.toggle("dark");
    });
</script>

Output

Initially:

Theme Switcher

[Toggle Theme]

After clicking:

Dark background
Light text

[Toggle Theme]

Click again and the page returns to the normal theme.

Step-by-step Explanation

The CSS class is:

.dark {
    background-color: #222;
    color: white;
}

JavaScript adds or removes the class:

document.body.classList.toggle("dark");

toggle() works like a switch:

Class exists → remove it
Class doesn't exist → add it

This is a common technique for theme switches, menus, buttons, and UI components.

Question 4: Build a Character Counter

Problem

Create a textarea that displays the number of characters typed by the user.

Solution

<textarea id="message" maxlength="100"></textarea>

<p>
    Characters:
    <span id="count">0</span>/100
</p>

<script>
    const message = document.getElementById("message");
    const count = document.getElementById("count");

    message.addEventListener("input", function() {
        count.textContent = message.value.length;
    });
</script>

Output

If the user types:

Hello

The page displays:

Characters: 5/100

Step-by-step Explanation

The input event runs whenever the textarea changes:

message.addEventListener("input", function() {

The current text is available through:

message.value

Its length is found using:

message.value.length

Then we display it:

count.textContent = message.value.length;

Question 5: Build a Simple To-Do List

Problem

Create an input field and button that allow users to add tasks to a list.

Solution

<input id="taskInput" placeholder="Enter a task">

<button id="addTask">Add Task</button>

<ul id="taskList"></ul>

<script>
    const taskInput = document.getElementById("taskInput");
    const addTask = document.getElementById("addTask");
    const taskList = document.getElementById("taskList");

    addTask.addEventListener("click", function() {

        const taskText = taskInput.value.trim();

        if (taskText === "") {
            return;
        }

        const li = document.createElement("li");

        li.textContent = taskText;

        taskList.appendChild(li);

        taskInput.value = "";
    });
</script>

Output

If the user enters:

Learn JavaScript

the list becomes:

• Learn JavaScript

Step-by-step Explanation

Get the user’s input:

const taskText = taskInput.value.trim();

Check whether it is empty:

if (taskText === "") {
    return;
}

Create a new list item:

const li = document.createElement("li");

Add the task:

li.textContent = taskText;

Add it to the list:

taskList.appendChild(li);

Finally, clear the input:

taskInput.value = "";

Question 6: Add a Delete Button to Every To-Do Item

Problem

Improve the previous To-Do List by adding a Delete button to every task.

Solution

<input id="taskInput" placeholder="Enter a task">

<button id="addTask">Add Task</button>

<ul id="taskList"></ul>

<script>
    const taskInput = document.getElementById("taskInput");
    const addTask = document.getElementById("addTask");
    const taskList = document.getElementById("taskList");

    addTask.addEventListener("click", function() {

        const taskText = taskInput.value.trim();

        if (taskText === "") {
            return;
        }

        const li = document.createElement("li");

        li.textContent = taskText + " ";

        const deleteButton =
            document.createElement("button");

        deleteButton.textContent = "Delete";

        deleteButton.addEventListener("click", function() {
            li.remove();
        });

        li.appendChild(deleteButton);
        taskList.appendChild(li);

        taskInput.value = "";
    });
</script>

Output

Learn JavaScript [Delete]
Practice DOM [Delete]
Build Projects [Delete]

Clicking Delete removes the selected task.

Step-by-step Explanation

Create a delete button:

const deleteButton =
    document.createElement("button");

Set its text:

deleteButton.textContent = "Delete";

Add a click event:

deleteButton.addEventListener("click", function() {
    li.remove();
});

The remove() method removes the task from the DOM.

Question 7: Build a Simple Image Changer

Problem

Create buttons that change an image when clicked.

Solution

<img
    id="photo"
    src="image1.jpg"
    width="300"
    alt="Gallery image"
>

<br><br>

<button id="image1">Image 1</button>
<button id="image2">Image 2</button>

<script>
    const photo = document.getElementById("photo");

    document.getElementById("image1")
        .addEventListener("click", function() {

            photo.src = "image1.jpg";

        });

    document.getElementById("image2")
        .addEventListener("click", function() {

            photo.src = "image2.jpg";

        });
</script>

Output

Clicking Image 1 displays:

image1.jpg

Clicking Image 2 displays:

image2.jpg

Step-by-step Explanation

Select the image:

const photo = document.getElementById("photo");

Then change its src attribute:

photo.src = "image2.jpg";

JavaScript can modify HTML attributes dynamically.

This technique is useful for:

Image galleries
Product previews
Sliders
Profile pictures

Question 8: Build a Simple FAQ Accordion

Problem

Create an FAQ section where clicking a question displays or hides its answer.

Solution

<div class="faq">
    <button class="question">
        What is JavaScript?
    </button>

    <p class="answer" hidden>
        JavaScript is a programming language used
        to make webpages interactive.
    </p>
</div>

<div class="faq">
    <button class="question">
        What is the DOM?
    </button>

    <p class="answer" hidden>
        DOM stands for Document Object Model.
    </p>
</div>

<script>
    const questions =
        document.querySelectorAll(".question");

    questions.forEach(function(question) {

        question.addEventListener("click", function() {

            const answer =
                question.nextElementSibling;

            answer.hidden = !answer.hidden;

        });

    });
</script>

Output

Initially:

What is JavaScript?
What is the DOM?

Clicking:

What is JavaScript?

reveals:

JavaScript is a programming language used
to make webpages interactive.

Step-by-step Explanation

Select all FAQ buttons:

document.querySelectorAll(".question");

Loop through them:

questions.forEach(function(question) {

When a question is clicked, find its answer:

const answer = question.nextElementSibling;

Then change its visibility:

answer.hidden = !answer.hidden;

This creates a simple accordion without needing a large library.

Question 9: Build a Simple Search Filter

Problem

Create a list of fruits and a search box. Display only the fruits matching the user’s search.

Solution

<input
    id="search"
    placeholder="Search fruits"
>

<ul id="fruitList">
    <li>Apple</li>
    <li>Banana</li>
    <li>Mango</li>
    <li>Orange</li>
    <li>Grapes</li>
</ul>

<script>
    const search = document.getElementById("search");

    const fruits =
        document.querySelectorAll("#fruitList li");

    search.addEventListener("input", function() {

        const searchText =
            search.value.toLowerCase();

        fruits.forEach(function(fruit) {

            const fruitName =
                fruit.textContent.toLowerCase();

            if (fruitName.includes(searchText)) {
                fruit.style.display = "";
            } else {
                fruit.style.display = "none";
            }

        });

    });
</script>

Output

If the user types:

an

the list may show:

Banana
Mango
Orange

Step-by-step Explanation

Get the search text:

const searchText =
    search.value.toLowerCase();

Get each fruit’s name:

const fruitName =
    fruit.textContent.toLowerCase();

Check whether it contains the search text:

fruitName.includes(searchText)

If it matches:

fruit.style.display = "";

Otherwise:

fruit.style.display = "none";

This is the basic logic behind many search filters.

Question 10: Build a Simple Quiz Project

Problem

Create a small quiz with one question and four answer buttons. Display whether the selected answer is correct.

Solution

<h2>Which language is used to make webpages interactive?</h2>

<button class="answer">HTML</button>
<button class="answer">CSS</button>
<button class="answer">JavaScript</button>
<button class="answer">SQL</button>

<p id="result"></p>

<script>
    const answers =
        document.querySelectorAll(".answer");

    const result =
        document.getElementById("result");

    answers.forEach(function(answer) {

        answer.addEventListener("click", function() {

            if (answer.textContent === "JavaScript") {
                result.textContent = "Correct!";
            } else {
                result.textContent = "Wrong answer!";
            }

        });

    });
</script>

Output

If the user clicks:

JavaScript

the page displays:

Correct!

If the user clicks:

HTML

the page displays:

Wrong answer!

Step-by-step Explanation

First, select all answer buttons:

const answers =
    document.querySelectorAll(".answer");

Loop through them:

answers.forEach(function(answer) {

Add a click event:

answer.addEventListener("click", function() {

Then compare the selected answer:

if (answer.textContent === "JavaScript")

If it matches, show:

result.textContent = "Correct!";

Otherwise:

result.textContent = "Wrong answer!";

This small project combines several important JavaScript concepts:

DOM Selection
+
Events
+
Conditions
+
Loops
+
Dynamic Text

Key Takeaways

DOM projects help you connect JavaScript with real webpages.
getElementById() selects an element by its ID.
querySelector() selects the first matching element.
querySelectorAll() selects multiple matching elements.
addEventListener() is used to respond to user actions.
textContent changes the text of an element.
classList.toggle() is useful for UI switches and themes.
createElement() creates new HTML elements with JavaScript.
appendChild() adds an element to another element.
remove() removes an element from the DOM.
JavaScript can change HTML attributes such as src.
JavaScript can read input using .value.
The input event is useful for live search and character counters.
forEach() can be used to process multiple DOM elements.
nextElementSibling can help connect related HTML elements.
DOM projects become easier when you divide the problem into small functions and steps.
Real projects often combine DOM, events, arrays, objects, conditions, and functions.

FAQs

1. What is a JavaScript DOM project?

A JavaScript DOM project is a small application that uses JavaScript to interact with HTML elements in a webpage.

Examples include:

To-do lists
Counters
Quiz applications
Search filters
Image galleries
Theme switchers
Form tools
FAQ accordions

2. Why should beginners practice DOM projects?

DOM projects help you understand how JavaScript works inside a real webpage.

Instead of only writing:

console.log("Hello");

you learn to make buttons, forms, lists, images, and other webpage elements respond to users.

3. What is the DOM in JavaScript?

DOM stands for Document Object Model.

The browser converts an HTML document into a structure of objects that JavaScript can access and modify.

For example:

<h1 id="title">Hello</h1>

JavaScript can select it:

const title =
    document.getElementById("title");

and change it:

title.textContent = "Welcome";

4. What should I learn before building DOM projects?

You should understand the basics of:

Variables
Data types
Conditions
Loops
Functions
Arrays
Objects
Events
DOM selectors

You do not need to master everything before starting. Building small projects is itself a good way to learn.

5. Why is `addEventListener()` important?

addEventListener() allows JavaScript to respond to user actions.

For example:

button.addEventListener("click", function() {
    console.log("Button clicked");
});

It can respond to events such as:

click
input
submit
keydown
mouseover
change

6. How do I practice DOM projects effectively?

Do not just copy the solution.

First:

Understand the project.
Try writing it yourself.
Test your code.
Compare it with the solution.
Find your mistakes.
Add one new feature.

For example, after creating a to-do list, try adding:

Complete task button
Delete button
Task counter
Local storage
Search
Filters

7. What DOM projects should a JavaScript beginner build?

A good progression is:

1. Text Changer
2. Counter
3. Theme Switcher
4. Character Counter
5. To-Do List
6. Image Gallery
7. FAQ Accordion
8. Search Filter
9. Quiz App
10. Calculator
11. Digital Clock
12. Expense Tracker

Start with small projects and gradually combine more JavaScript concepts.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar

Introductions

Question 1: Create a Button That Changes Text

Problem

Solution

Output

Step-by-step Explanation

Question 2: Build a Counter Project

Problem

Solution

Output

Step-by-step Explanation

Question 3: Create a Light and Dark Mode Toggle

Problem

Solution

Output

Step-by-step Explanation

Question 4: Build a Character Counter

Problem

Solution

Output

Step-by-step Explanation

Question 5: Build a Simple To-Do List

Problem

Solution

Output

Step-by-step Explanation

Question 6: Add a Delete Button to Every To-Do Item

Problem

Solution

Output

Step-by-step Explanation

Question 7: Build a Simple Image Changer

Problem

Solution

Output

Step-by-step Explanation

Question 8: Build a Simple FAQ Accordion

Problem

Solution

Output

Step-by-step Explanation

Question 9: Build a Simple Search Filter

Problem

Solution

Output

Step-by-step Explanation

Question 10: Build a Simple Quiz Project

Problem

Solution

Output

Step-by-step Explanation

Key Takeaways

FAQs

1. What is a JavaScript DOM project?

2. Why should beginners practice DOM projects?

3. What is the DOM in JavaScript?

4. What should I learn before building DOM projects?

5. Why is addEventListener() important?

6. How do I practice DOM projects effectively?

7. What DOM projects should a JavaScript beginner build?

Related Posts

5. Why is `addEventListener()` important?