Skip to main content

How to Change Text Color on Click in JavaScript

Changing an element's text color in response to a user's click is a fundamental way to provide visual feedback and create an interactive experience. The standard way to achieve this is by adding a click event listener to an element and then manipulating the style.color property of the target element.

This guide will teach you how to change the text color of the clicked element itself, another specific element, or the entire document body.

The Core Method: addEventListener and .style.color​

The process for changing color on click always involves two main steps:

  1. Listen for the Click: Use element.addEventListener('click', callback) to execute a function when a user clicks on an element.
  2. Change the Style: Inside the callback function, get a reference to the element you want to change and set its .style.color property to a new CSS color value.

Consider this HTML code for next examples:

<button id="myButton">Click Me</button>
<p id="myText">Some sample text.</p>

How to Change the Color of the Clicked Element​

The event object, which is automatically passed to your event listener, contains a special property called event.target. This property is a reference to the exact element that was clicked.

Solution:

const button = document.getElementById('myButton');

button.addEventListener('click', (event) => {
  // event.target refers to the button itself
  event.target.style.color = 'red';
  
  console.log('The button text is now red.');
});

This is useful for providing immediate feedback on the element the user just interacted with.

How to Change the Color of a Different Element​

A very common pattern is to click one element (like a button) to change the style of another element.

For example, when the button is clicked, you want to change the color of the <p> tag.

The solution is to get a reference to the target element using its ID (from inside the click listener) and then change its style,

const button = document.getElementById('myButton');
const textElement = document.getElementById('myText');

button.addEventListener('click', () => {
  // Change the color of the <p> element
  textElement.style.color = 'blue';
  
  console.log('The paragraph text is now blue.');
});

How to Change the Text Color Globally​

If you want to change the default text color for the entire page, you can apply the style directly to the document.body element. Due to CSS inheritance, most text elements on the page will adopt this new color unless they have a more specific color rule.

const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  // Set the color on the <body> element
  document.body.style.color = 'darkgray';
  
  console.log('The default text color for the page has been changed.');
});

Practical Example: A Color Cycle Button​

This script demonstrates a more dynamic use case. Each time a button is clicked, it cycles through a predefined list of colors and applies the next one to a paragraph.

HTML:

<button id="cycle-btn">Cycle Color</button>
<p id="target-text">This text will change color.</p>

JavaScript:

const cycleButton = document.getElementById('cycle-btn');
const targetText = document.getElementById('target-text');

const colors = ['red', 'green', 'blue', 'purple', 'orange'];
let currentIndex = 0;

cycleButton.addEventListener('click', () => {
  // Set the text color to the current color in the array
  targetText.style.color = colors[currentIndex];
  
  // Increment the index for the next click
  currentIndex++;
  
  // Use the modulo operator to loop back to the start of the array
  if (currentIndex >= colors.length) {
    currentIndex = 0;
  }
});

Conclusion​

Changing text color on click is a simple but powerful technique for creating interactive UIs.

  • The core of the solution is to use addEventListener('click', ...) to trigger an action.
  • To change a color, set the element.style.color property.
  • You can target:
    • The clicked element itself using event.target.
    • A different element by selecting it with getElementById() or another selector.
    • The entire page by styling document.body.

Table of Contents