Change text color on click using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

Table of Contents #

  1. Change the document's text color on click
  2. Change the element's text color on click
  3. Change another element's text color on click

Change the document's text color on click #

To change the document's text color on click:

  1. Add a click event listener to an element.
  2. Each time the element is clicked, set the document.body.style.color property to a specific color.
  3. The text color change will be global unless overridden.

Here is the HTML for the example in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div>Some text here</div> <button id="btn">Button</button> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { // 👇️ Change text color globally document.body.style.color = 'darkgreen'; // 👇️ Change text color for clicked element only // event.target.style.color = 'salmon'; });

change document text color on click

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.color property to darkgreen and change the text color globally.

Change the element's text color on click #

To change an element's text color on click:

  1. Add a click event listener to the element.
  2. Assign the event object to a variable in the function.
  3. Set the event.target.style.color property to the specific text color.
index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { // 👇️ Change text color for clicked element only event.target.style.color = 'salmon'; });

change element text color on click

Every time the button is clicked, its own text 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.

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { console.log(event.target); // 👇️ Change text color for clicked element only event.target.style.color = 'salmon'; });

If you click on the button and look at your console output, you'll see the button element being logged.

Change another element's text color on click #

To change another element's text color on click:

  1. Add a click event listener to one of the elements.
  2. Each time the element is clicked, change the style.color property of the other element.

Let's add an id to the div element, so we can select it.

index.html
<!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.

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { const box = document.getElementById('box'); box.style.color = 'salmon'; });

change text color of another element

Each time the button is clicked, we change the div's text color to salmon.

Use the search field on my Home Page to filter through my more than 3,000 articles.