Change Text Color On Click In JavaScript

To change text color on click in JavaScript, first select the element whose color you want to change. Then, use the element’s style property to set the color property to the desired color. Finally, use the onclick event handler to call a function that will change the element’s color.

Let’s see how to achieve this in detail, below –

how to change text color on click in JavaScript

How To Change The Document’s Text Color On Click

In order to change the document’s text color on click, you can use the following code:

document.body.style.color = "new color";

Let’s see the complete example with HTML, CSS and JavaScript:

<html>

<head>

<body>

<button id="myButton">CLICK ME</button>

<script type="text/javascript">

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

button.addEventListener("click", function() {

document.body.style.color = "green";

});

</script>

</body>

</head>

</html>

The document.body.style.color property is used to change the text color of the document.

The button with id=”myButton” is used to trigger the function that changes the text color.

The function is executed when the button is clicked .

How To Change An Element’s Text Color On Click

In order to change an element’s text color on click, you can use the following code:

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

button.addEventListener("click", function onClick (event) {

event.target.style.color = "green";

});

Let’s see the complete example with HTML, CSS and JavaScript:

<html>

<head>

<body>

<button id="myButton">CLICK ME</button>

<script type="text/javascript">

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

button.addEventListener("click", function onClick (event) {

event.target.style.color = "green";

});

</script>

</body>

</head>

</html>

The event.target.style.color property is used to change the text color of the element that triggered the function.

The button with id=”myButton” is used to trigger the function that changes the text color.

The function is executed when the button is clicked .

How To Change Another Element’s Text Color On Click

To change another element’s text color on click, you can use the following code:

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

button.addEventListener("click", function onClick (event) {

const txt = document.getElementById("txt");

txt.style.color = "green";

});

Let’s see the complete example with HTML , CSS and JavaScript:

<html>

<head>

<body>

<button id="myButton">CLICK ME</button>

<p id="txt">This is a paragraph.</p>

<script type="text/javascript">

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

button.addEventListener("click", function onClick (event) {

const txt = document.getElementById("txt");

txt.style.color = "green";

});

</script>

</body>

</head>

</html>

The txt.style.color property is used to change the text color of the element with id=”txt”.

The button with id=”myButton” is used to trigger the function that changes the text color.

The function is executed when the button is clicked .

When the above code is executed, the element txt’s text color will be changed to green on click of the button.

This was a quick tutorial on how to change the text color on click in JavaScript. I hope you find it useful! Thanks for reading!

Leave a Reply