Borislav Hadzhiev
Last updated: Jul 25, 2022
Check out my new book
To change the page's background color on click:
click
event listener to an element.document.body.style.backgroundColor
property to a specific color.Here is the HTML for the example in this article.
<!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.
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'; });
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.
To change an element's background color on click:
click
event listener to the element.event
object to a variable in the function.event.target.style.backgroundColor
property to the specific
background color.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.
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.
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.
To change another element's background color on click:
click
event listener to one of the elements.style.backgroundColor
property
of the other element.Here is the HTML for the example.
<!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.
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
.