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>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="box">Some text here</div>
<button id="btn">Button</button>
<script src="index.js"></script>
</body>
</html>
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>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="box">Some text here</div>
<button id="btn">Button</button>
<script src="index.js"></script>
</body>
</html>
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.
To change a button's color every time it's clicked:
Add a click event listener to the button. Each time the button is clicked, set its style. backgroundColor property to a new value. Use an index variable to track the current and next colors.
Type background-color: in the quotation marks after "style=". This element is used to change the background color of the button. Type a color name or hexadecimal code after "background-color:". You can type name of a color (i.e, blue) or a hexadecimal color.
What button do you click to change the background color of a page?
Add or change the background color
Go to Design > Page Color. Choose the color you want under Theme Colors or Standard Colors. If you don't see the color you want, select More Colors, and then choose a color from the Colors box.
How do I change the background color in Click react?
To change background color on click in React:
Set the onClick prop on the element. When the element is clicked, set the active state. Use a ternary operator to conditionally set the background color based on the state variable.
| 
