How to Change Text Color Using Javascript?

by

In this article, we are going to change text color using the javascript function. After the button is clicked, the JavaScript function is called and sets the color to the text.

HTML

Here I simply give an id to the H1 tag and create an HTML button with onclick attribute. 

<!DOCTYPE html>
<html>
   <head>
      <title>Display Data in Textarea</title>
   </head>
   <body>
      
      <h1 id="text_id">Hello, Coder</h1>
       
        <input type="button" value="calculate Data" onclick="changeColor()" />
   </body>
</html>

Javascript

This is a simple js function to change the text color. The color CSS property sets the foreground color value of an element’s text and text decorations and sets the current color value. 

function changeColor() {
    document.getElementById("text_id").style.color = 'red';
   }

I hope this post will be helpful for you.