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

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <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 - www.pakainfo.com</title>
</head>
<body>
  
  <div>
    <button id="default">Default</button>
    <button id="error">Error</button>
    <button id="success">Success</button>
  </div>

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

JavaScript Code

main.js

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

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

CSS Code

main.css

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

<script>

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

    function updateCL() {
        document.body.style.color = "green";
        return false;
    }   

</script>

javascript change color of button

document.getElementById("button").style.background='#337ab7';

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