javascript-change color onclick()

Javascript Change Color onclick()#

Changing the color of an element on a webpage can be done easily with Javascript. One way to achieve this is by using the onclick() function.

Example: Change Color on Button Click#

Here is an example of changing the background color of a div element with the id "myDiv" when a button is clicked:

        function changeColor() {
            document.getElementById("myDiv").style.backgroundColor = "blue";
        }
        

In this example, we define a Javascript function called "changeColor" that sets the background color of the element with the id "myDiv" to blue. We then call this function when a button is clicked:

        <button onclick="changeColor()">Change Color</button>
        <div id="myDiv">This is my div</div>
        

When the button is clicked, the "changeColor" function is called and the background color of "myDiv" is changed to blue.

Example: Toggle Color on Button Click#

Another way to change the color of an element with onclick() is by toggling between two colors. Here is an example:

        var toggle = false;

        function toggleColor() {
            var myDiv = document.getElementById("myDiv");

            if (toggle) {
                myDiv.style.backgroundColor = "red";
            } else {
                myDiv.style.backgroundColor = "blue";
            }

            toggle = !toggle;
        }
        

In this example, we define a Javascript function called "toggleColor" that toggles the background color of the element with the id "myDiv" between blue and red. We use a variable called "toggle" to keep track of the current color. When the button is clicked, we call the "toggleColor" function:

        <button onclick="toggleColor()">Toggle Color</button>
        <div id="myDiv">This is my div</div>
        

When the button is clicked, the "toggleColor" function is called and the background color of "myDiv" is toggled between blue and red.

Conclusion#

Changing the color of an element with onclick() in Javascript is a simple way to add interactivity to your webpages. Whether you want to change the color with a single click or toggle between two colors, onclick() is a versatile function that can help you achieve your desired effect.