DOM Exercise

This tutorial covers several exercises that demonstrate basic JavaScript functionality for manipulating the Document Object Model (DOM). Below are explanations and improvements for each exercise:

Exercise 1: Change Text

Objective: Modify text content of an HTML element using JavaScript.

HTML Code:

html
 
1<h1 id="text">Hello World!</h1>
2<button onclick="changeText()">Change</button>
3
4<script>
5function changeText() {
6    const text = document.getElementById("text");
7    text.innerText = "Goodbye!";
8}
9</script>

Exercise 2: Change Background Color

Objective: Change the background color of an HTML element.

HTML Code:

html
 
1<h1 id="color">Hello World!</h1>
2<button onclick="changeColor()">Change</button>
3
4<script>
5function changeColor() {
6    const color = document.getElementById("color");
7    color.style.backgroundColor = "red";
8}
9</script>

Exercise 3: Count Number

Objective: Implement a simple counter that increments, decrements, and resets.

HTML Code:

html
 
1<h1>Count = <span id="number">0</span></h1>
2<button onclick="increase()">+</button>
3<button onclick
4
5[Read the full article at DEV Community](https://dev.to/mohandassmani/dom-exercise-18h2)
6
7---
8
9**Want to create content about this topic?** [Use Nemati AI tools](https://nemati.ai) to generate articles, social posts, and more.