JavaScript Program to Change Background Color with Event Listener
Using an Event Listener to Change the Background Color of an HTML Element
With Event Listeners, JavaScript is able to respond to user interactions and execute functions accordingly. In this tutorial, we’ll learn how to use an Event Listener to change the background color of an HTML element when a button is clicked.
Step 1: Create the HTML Elements
The first step we need to do is create the HTML structure required for our program. We’ll need to create a div element with an id for our background color to change, a button element to trigger the event listener, and a script element to contain the JavaScript code.
<div id="background">This is the div whose background color will change.</div> <button id="color-btn">Change Color</button> <script> // JavaScript code here </script>
Step 2: Write the Event Listener Function
Now that we have the HTML elements, let's write the function that will be triggered by the event listener. This function will use the getElementById() method to target the div element and set its background color to the value provided in the function arguments.
function changeBackgroundColor(color) {
document.getElementById('background').style.backgroundColor = color;
}
Step 3: Add the Event Listener
Now, we can add the event listener to the button element. We'll use the addEventListener() method and pass it two arguments: the type of event, which in this case is a click, and the function we want to execute, which is our changeBackgroundColor() function.
document.getElementById('color-btn').addEventListener('click', changeBackgroundColor);
Step 4: Test the Program
To test the program, we can give the changeBackgroundColor() function a default argument and open the page in a browser to see if the background color changes when the button is clicked.
function changeBackgroundColor(color='#8080ff') {
document.getElementById('background').style.backgroundColor = color;
}
By following these four steps we can easily create a program using an Event Listener to change the background color of an HTML element when a button is clicked.
Full source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background Color</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
margin-top: 50px;
}
.color-box {
width: 200px;
height: 200px;
margin: 0 auto;
border: 2px solid #000;
}
</style>
</head>
<body>
<div class="container">
<h1>Change Background Color</h1>
<div class="color-box" id="box"></div>
<button id="changeColorBtn">Change Color</button>
</div>
<script>
document.getElementById('changeColorBtn').addEventListener('click', function() {
var box = document.getElementById('box');
var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16); // Generates a random color
box.style.backgroundColor = randomColor;
});
</script>
</body>
</html>