How to change Text Color on click in JavaScript

# Table of Contents

# Change the document's text color on click

To change the document's text color on click:

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

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>Some text here</div>
    <button id="btn">Button</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
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

The code for this article is available on GitHub

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:

Add a click event listener to the element.
Assign the event object to a variable in the function.
Set the event.target.style.color property to the specific text color.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  // 👇️ Change text color for the clicked element only
  event.target.style.color = 'salmon';
});

change element text color on click

The code for this article is available on GitHub

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

Copied!
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:

Add a click event listener to one of the elements.
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

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <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>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
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

The code for this article is available on GitHub

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

I've also written an article on how to change text color on mouseover.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to change Text Color on click in JavaScript

# Table of Contents

# Change the document's text color on click

# Change the element's text color on click

# Change another element's text color on click

# Additional Resources

Borislav Hadzhiev