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:
- How To Clear Input Fields After Submit Using JavaScript
- Set the Width and Height of an Element using JavaScript
- Get Elements by multiple Class Names in JavaScript
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java
