Table of Contents #
- Change the page's background color on click
- Change the elements's background color on click
- Change another element's background color on click
Change the pages's background color on click #
To change the page's background color on click:
- Add a
click
event listener to an element. - Each time the element is clicked, set the
document.body.style.backgroundColor
property to a specific color.
Here is the HTML for the example in this article.
Copied!
DOCTYPE html> Some text here Button
And here is the related JavaScript code.
Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ change background color document.body.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // document.body.style.color = 'white'; }];
We added a click
event listener to the button, so a function is invoked every time the button is clicked.
Each time the button is clicked, we set the document.body.style.backgroundColor
property to salmon
and change the page's background color.
Change the element's background color on click #
To change an element's background color on click:
- Add a
click
event listener to the element. - Assign the
event
object to a variable in the function. - Set the
event.target.style.backgroundColor
property to the specific background color.
Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ change background color event.target.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // event.target.style.color = 'white'; }];
Every time the button from the example is clicked, its own background color gets set.
We used the target property on the event
object. The target
property is a reference to the object [element] on which the event was dispatched.
In other words, event.target
gives us access to the DOM element the user clicked.
You can console.log
the target
property to see the DOM element which was clicked by the user.
Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { console.log[event.target]; // 👇️ change background color event.target.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // event.target.style.color = 'white'; }];
If you click on the
button and look at your console
output, you'll see the button
element being logged.
Change another element's background color on click #
To change another element's background color on click:
- Add a
click
event listener to one of the elements. - Each time the element is clicked, change the
style.backgroundColor
property of the other element.
Here is the HTML for the example.
Copied!
DOCTYPE html> Some text here Button
And here is the related JavaScript code.
Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { const box = document.getElementById['box']; box.style.backgroundColor = 'coral'; // 👇️ optionally change text color // box.style.color = 'white'; }];
Each time the button is clicked, we change the div
's background
color to coral
.
How do I change the background color when I click the button?
How do I change the color of a clicked button in CSS?
How do I change the text on a click in HTML?
How do I change the color of text when clicked in CSS?
and
element and set its colour as yellow with green background.