How To Change Background Color On Click In JavaScript?

How To Change Background Color On Click In JavaScript?

Hi guys, today we are going to learn a pretty interesting challenge. It will help us to become more familiar with DOM. The challenge is use JS DOM or any JS library as long as you can change background color on click in JavaScript.

Let’s do the “change background color on click in JavaScript” challenge together

We must use methods that work with the click event and the background color property to change the background by clicking.

JavaScript DOM has a lot of methods and properties that can do that. Let’s find the best method together!

Methods working with click event

The HTML onclick attribute.

The onclick attribute is one of the useful attributes of HTML Events.

Syntax:

<element onclick="func">

Description:

Func in the onclick attribute will execute when we click on the element.

The onclick event handler.

Similar to the onclick attribute, the difference is that we assign an onclick handler in JavaScript.

Syntax:

object.onclick = function(){...}

Description:

When the object is clicked, the function will execute.

The addEventListener() method.

Can assign the click event and other common events such as change, blur and hover.

Syntax:

object.addEventListener(event, callback)

Description:

When the event occurs, the callback will be executed.

Properties working with the background color

Style property.

You can change the CSS of an element by accessing its style attribute. One note is that you must use the camelCase style to write the CSS properties in the style attribute.

Syntax:

element.style.property = value

Description:

The value will be assigned to the CSS property of the element.

Other properties and methods.

Besides style, many other attributes and methods can still work with background color, such as classList, setAttribute()

You can learn more about them in the MDN web docs.

Combine style property with methods

Combine the onclick attribute with the style property.

First, we define a function that changes the background of the body tag with the style attribute. Then we assign that function to the onclick attribute of the HTML tag. See the example below to understand.

<body>
    <h1>Hello, this is learnshareIT</h1>

    <!-- Using onclick attribute -->
    <button onclick="changeBgColor()" class="btn">
      Click to change background color
    </button>

    <script>
      function changeBgColor() {
        document.body.style.backgroundColor = '#7ed56f';
      }
    </script>
</body>

Output:

Combine the onclick event handler with the style property.

In this case, we have to get the button element using querySelector('.btn'). Then call the onclick attribute on that element and assign it a function that changes the background color of the body tag. Like this:

<body>
    <h1>Hello, this is learnshareIT</h1>
    <button class="btn">Click to change background color</button>

    <script>
      let btn = document.querySelector('.btn');
     
      // Using onclick event handler
      btn.onclick = function () {
        document.body.style.backgroundColor = '#748ffc';
      };
    </script>
</body>

Output:

Combine the addEventListener() with the style property.

This way, we still have to get the button element first. Then we call the addEventListener() function on that element, we pass ‘click’ as the first parameter, and the second parameter is a function that changes the background of the body tag like the two examples above. Look closely at the third example to understand how addEventListener() works.

<body>
    <h1>Hello, this is learnshareIT</h1>
    <button class="btn">Click to change background color</button>

    <script>
      let btn = document.querySelector('.btn');

      // Using addEventListener()
      btn.addEventListener('click', function () {
        document.body.style.backgroundColor = '#fa5252';
      });
    </script>
</body>

Output:

Summary

Congratulations, we’ve just finished a pretty cool challenge. Change background color on click in JavaScript is an effect used on many modern websites. Hopefully, with this simple effect, you can build a beautiful website by yourself.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *