Color changing buttons

The HTML Document Object Model (DOM) allows JavaScript to change the styles of HTML elements.

Reading this blog will let you know how to change the styling properties by clicking buttons on your website.

Source code: github.com/aasimd/color-changing-buttons

Try it yourself: color-changing-buttons.netlify.app

Start with setting up HTML file first

<body>
    <h1>
        Color changing buttons
    </h1>
    <section id="box"></section>
    <div>
        <button id="red-btn">
            Red
        </button>
        <button id="blue-btn">
            Blue
        </button>
        <button id="yellow-btn">
            Yellow
        </button>
    </div>


    <script src="main.js"></script>
</body>

Write down a heading in H1 for the page. Put a section with id named box (this will be used to change colors), then get three buttons, name them with three colors red, blue and yellow and give them individual ids. And we have also linked our index.html HTML file to our main.js JavaScript file
Now add some css styles to it

body{
    text-align: center;
    display: block;
}

#red-btn{
    background-color: red;
}
#blue-btn{
    background-color: blue;
}
#yellow-btn{
    background-color: yellow;
}
#box{
    height: 8rem;
    width: 8rem;
    border: 1px black solid;
    margin: auto;
    margin-bottom: 1rem;
}
div{
    margin: 1rem;
}

Your page will look like this

Screenshot 2022-12-05 005554.png HTML and CSS are done. the section with #box is white. Now lets add some color to it using the tree buttons that we have.

Now to let JavaScript get involved

Using DOM get elements from the html page by using querySelector or getElementById

var red = document.querySelector("#red-btn");
var blue = document.querySelector("#blue-btn");
var yellow = document.querySelector("#yellow-btn");
var box = document.querySelector("#box");

Now that the elements are in JavaScript we can make easy changes to their properties.

Write the function to be performed when the button is clicked.

we have to write three functions for three buttons.

function redClick (){
    box.style.backgroundColor="red";
}

function blueClick(){
    box.style.backgroundColor="blue";
}

function yellowClick(){
    box.style.backgroundColor="yellow";
}

in the functions we access the box styles by using box.style and then box.style.backgroundColor we acces the background-color property of css using javaScript function .style

And then we set the color of the box we want when the specific button is clicked i.e. red for red button, blue for blue button, yellow for yellow button.

Now lets call an event listener on the buttons

red.addEventListener("click",redClick)
blue.addEventListener("click",blueClick)
yellow.addEventListener("click",yellowClick)

when the event of click happens of the red button it will call a function of redClick. When the red button is clicked, we will get...

Screenshot (76).png when the blue button is clicked, we get...

Screenshot (77).png when the yellow button is clicked, we get...

Screenshot (78).png

Try it yourself: color-changing-buttons.netlify.app

Aasim's Web Blogs

Aasim's Web Blogs

Color changing buttons

How to change styling properties of HTML elements using JavaScript buttons.