I need to change the background color of the button from dark to green
<button class="btn btn-dark" id="btn" th:attr="onclick=|vote('${listAnswer.answer_id}','+1')|"><i class="fa fa-star fa-2x" ></i>UpVote</button>
I tried to changed the button's background color from dark to green using following code. It does not work. Please help me
function vote(answerId,rateValue){
alert(rateValue);
axios.post('/saveRatings?answerId=' + answerId + '&rateValue=' + rateValue, {
})
.then(function(response){
document.getElementById("btn").style.background-color='green';
})
}
JavaScript property names cannot contain the - character because this is an operator.
Due to this, CSS properties must be accessed with camelCase syntax.
Instead of :
document.getElementById("btn").style.background-color = 'green';
Use this :
document.getElementById("btn").style.backgroundColor = 'green';
After you have clicked a button it's state becomes "active" and you can use css to change the color of the button to whatever you want. All you need to do is add a css rule using the ":active" selector. https://www.w3schools.com/cssref/sel_active.asp https://www.freecodecamp.org/news/css-button-style-hover-color-and-background/ Basically:
button:active { color: green; }
You can try this way
<button class="btn btn-dark" id="btn" th:attr="onclick=|vote('${listAnswer.answer_id}','+1')|"><i class="fa fa-star fa-2x" ></i>UpVote</button>
JS
const btn = document.getElementById('btn');
btn.addEventListener('click', function onClick() {
btn.style.backgroundColor = 'green';
btn.style.color = '(Color whatever you want)';
});