Change text color on click using JavaScript

avatar

Borislav Hadzhiev

Wed Dec 29 20212 min read

banner

Photo by Matt Higham

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'; });

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'; });

Every time the button from the example is clicked, its own text color gets set.

In the example, 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'; });

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

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee