change button color onclick css – How to Change Button Color on Click in Javascript?

change button color onclick css JavaScript to change the background color after clicking the button.

change button color onclick css – change button color onclick

change button color onclick – We have attached a click event listener to all the button elements.

javascript change button onclick

function changeColor() {
  document.getElementById("a").onclick = updateCL();

Don’t miss : Dynamically AddClass CSS Click Using JQuery


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <title>change button color on click -</title>
    <button id="default">Default</button>
    <button id="error">Error</button>
    <button id="success">Success</button>

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

JavaScript Code


let defultButton = document.querySelector('#default');
let errorButton = document.querySelector('#error');
let responseButton = document.querySelector('#success');

defultButton.addEventListener('click', () => = '#337ab7')
errorButton.addEventListener('click', () => = '#c9302c')
responseButton.addEventListener('click', () => = '#4cae4c')

CSS Code


div {
    display: flex;
    justify-content: center;

button {
    padding: 10px 20px;
    margin: 5px;
    background-color: black;
    color: #fff;
    border: none;    
    outline: none;
    border-radius: 5px;

javascript change color of button onclick

onclick change text color javascript


    document.getElementById('change').onclick = updateCL;   

    function updateCL() { = "green";
        return false;


javascript change color of button


I hope you get an idea about change button color onclick css.
I would like to have feedback on my
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.