Do you know how to change the text color on Click using Javascript at this moment? Do not worry, because this article will help broaden your horizon about this issue. Let’s start with the great information below.        

How to change text color on Click using Javascript?

When you work with Javascript and implement the app’s frontend, it should transform the text color using Javascript during the event. For instance, we get an app that might switch on/off the device. 

We get the button to take this action. While the device is on, you need to ensure the button text is green. In some cases, you can make the button text red. 

As for a wide range of cases, developers can alter the font color through Javascript. Now, it’s time to learn how to change text color on Click using Javascript. 

Approach 1: Change the style of an element

First, you must approach the element and change the style. In other words, you can access the element by class name or ID through Javascript. You must transform the element’s style by applying the ‘.style’ property.

Besides, in other cases, you might alter the color property values to transform the font color. Here is an example code to change the font color through Javascript. 

let element = document.getElementById('element_id');

//colorCode: It can be a new color you need to use for the text. 
// As usual, this will be a color name or RGB values.
element.style.color = colorCode;

Code Example:

In this example, we have made a button. When the user clicks on this button, we might call the function “changeBtnColor().” Inside the function, you can access the button element by applying ID and altering the color using the property of its style

<button onclick = "changeBtnColor()" id ="btn" >Change Font Color</button>
<script>
      function changeBtnColor() {
            let btn = document.getElementById("btn");
            let colorbtn = btn.style.color;
            if (colorbtn == "blue") {
                  btn.style.color = 'black';
            } else {
                  btn.style.color = 'blue';
            }
      }
</script>

Next, when users click the “Change Font Color” button, they can quickly move the button from green to red. 

Approach 2: Change all the text’s color

Next, you can learn how to change all the body text’s color in this section. When you want to use the light or dark theme in your app, it is not good to transform the color of each element one by one. You need to change the text color with one click to make it easy. 

Here is a example code you need to care about to change the text color. 

document.body.style.color = color

Example:

We will provide the example below to help you understand the text color’s transformation. In this case, you can change all text colors rather than the specific element’s text. 

<button onclick = "changeTextColor()" id = "btn">Change Text Color</button>
<script>
    function changeTextColor() {
        let color = document.body.style.color;

        if (color == "blue") {
            document.body.style.color = 'black';
        } else {
            document.body.style.color = 'blue';
        }
    }
</script>

Now, the user can click on the action button directly. This can change the text color from pink to blue right away.

Approach 3: Apply the string fontcolor() method

We will represent the fontcolor() method. The fontcolor() method can use for a text string, which might return the <font> HTML element with the color property. 

Next, users could track the sample code below.

let text = "some text";

text.fontcolor("color");

Parameters:

Color: the color code or color name. 

Return values:

The fontcolor() method will return the <font> HTML element like below. 

<font color="color"> some text </font>

Example

As for this example, you can alter the color of a specific string by applying the string fontcolor() method. 

<div id="divtest"> How to change the text color</div>
<button onclick = "changeFontColor()" id = "btn">Change Text Color</button>
<script>
    function changeFontColor() {
        let colorDiv = document.getElementById("divtest");
        let str = "Color Red";
        colorDiv.innerHTML = str.fontcolor("red");
    }
</script>

Until the moment, users could realize that when they click the button, the text’s font transforms to green.      

Conclusion

That’s all about the guide on how to change the text color on Click using Javascript. After browsing this blog, we ensure you have studied to transform all text colors on Click using Javascript. Last but not least, we will be ready to support you immediately if you have any queries involved in this issue. 

Read more:

→ How To Change The SRC Of An Image In Javascript