How to change color of text in JavaScript?

What is JavaScript?

JavaScript is a popular programming language that is used alongside HTML and CSS. It can be used in the frontend as well as in the backend. In the frontend, it is used to create interaction on the web page. At the backend, it is used to create functionality such as login, management, and scraping. As of 2024, 98.7% of websites use JavaScript on the client side for webpage behavior.

Why JavaScript is Popular?

People really like using JavaScript, and the 2020 Stack Overflow Developer Survey helps us understand why. First off, it’s everywhere on the internet and works well with all the big web browsers, making it super useful for creating websites. Many people start their coding journey with JavaScript for web projects and then use it for other things too.

What makes JavaScript so cool is its flexibility. Unlike some other languages that have strict rules, JavaScript is open and adaptable, so you can use it in different ways for different types of projects. Surprisingly, it works for both frontend and the backend, making it versatile.

Another awesome thing about JavaScript is the strong support it gets from its community and the loads of resources available. There’s a big and friendly community of developers, and they’ve built powerful tools like libraries and frameworks for creating websites, server-side applications, and even games. Whether you’re just starting out or you’re a pro coder, JavaScript has got your back with the tools and help you need to make your projects awesome.

How to change color of text in html using JavaScript?

The task of changing color of text in JavaScript is simple and easy. You need to create four button to change color of text. Here is a code and tutorial:

Code for onclick color change in JavaScript

HTML

				<html>
<body>
<style >
button{

width: 200px;
height: 50px;
border-radius: 10px;
border:2px solid black;
font-size: 30px;
}
</style>

<h1 style="font-size: 50px;" id="p2">Follow Me on Youtube </h1>
<button style="background-color: blue; color: white;" onclick="Blue()">Blue</button>
<button style="background-color: red; color: white;" onclick="Red()">Red</button>
<button style="background-color: green; color: white;" onclick="Green()">Green</button>
<button style="background-color: yellow; " onclick="Yellow()">Yellow</button>
<script>
function Blue()
{
document.getElementById("p2").style.color = "blue";

}
function Red()
{
document.getElementById("p2").style.color = "red";

}
function Green()
{
document.getElementById("p2").style.color = "green";

}
function Yellow()
{
document.getElementById("p2").style.color = "yellow";

}
</script>

</body>
</html>

<html>
<body>
<style >
button{

width: 200px;
height: 50px;
border-radius: 10px;
border:2px solid black;
font-size: 30px;
}
</style>

<h1 style="font-size: 50px;" id="p2">Follow Me on Youtube </h1>
<button style="background-color: blue; color: white;" onclick="Blue()">Blue</button>
<button style="background-color: red; color: white;" onclick="Red()">Red</button>
<button style="background-color: green; color: white;" onclick="Green()">Green</button>
<button style="background-color: yellow; " onclick="Yellow()">Yellow</button>
<script>
function Blue()
{
document.getElementById("p2").style.color = "blue";

}
function Red()
{
document.getElementById("p2").style.color = "red";

}
function Green()
{
document.getElementById("p2").style.color = "green";

}
function Yellow()
{
document.getElementById("p2").style.color = "yellow";

}
</script>

</body>
</html>