How to change text color onclick


Go to main Page

How to change text color onclick in Javascript

Javascript is a programming language that is used on the client-side and also on the server-side. It is used to make webpages interactive which attracts the audience to your website. JavaScript can calculate and validate data. Javascript can add animation to the webpage. we can hide, show, move content on the webpage by using javascript.


Coding website free hosting


Code for changing color of text onclick

<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">Learn webdevelopment ITdesignerspk.com </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>


Tutorial to change color onclick in HTML