In this tutorial we will learn How To Change Button Color onclick with JavaScript. For this we can use onclick attribute, .style property and .backgroundColor property.
Table of Contents
HTML Code
HTML Code is given below, we have one button tag with onclick attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Button Color onclick with JavaScript</title>
</head>
<body>
<button onclick="changeColor(this)">Click Me.</button>
</body>
</html>
JavaScript Code
Take a look at the JavaScript code given below.
<script>
function changeColor(event){
var color = 'yellow';
event.style.backgroundColor=color;
}
</script>
On button click, above function will be called and the statement inside will be executed which will change the color of button using .style property and .backgroundColor property.
Demo
Video Tutorial
Watch video tutorial on How To Change Button Color onclick with JavaScript.