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

Default
Error
Success

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')

Also Read : RGB to HEX Color Converter

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

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.