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:
html1<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:
html1<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:
html1<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.

![[AINews] The Unreasonable Effectiveness of Closing the Loop](/_next/image?url=https%3A%2F%2Fmedia.nemati.ai%2Fmedia%2Fblog%2Fimages%2Farticles%2F600e22851bc7453b.webp&w=3840&q=75)



