Necesito cambiar el color de fondo del botón de oscuro a verde
<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>Traté de cambiar el color de fondo del botón de oscuro a verde usando el siguiente código. No funciona. por favor, ayúdame
function vote(answerId,rateValue){ alert(rateValue); axios.post('/saveRatings?answerId=' + answerId + '&rateValue=' + rateValue, { }) .then(function(response){ document.getElementById("btn").style.background-color='green'; }) }Los nombres de propiedad de JavaScript no pueden contener el carácter - porque es un operador .
Debido a esto, se debe acceder a las propiedades CSS con la sintaxis camelCase .
En vez de :
document.getElementById("btn").style.background-color = 'green';Utilizar este :
document.getElementById("btn").style.backgroundColor = 'green';Después de hacer clic en un botón, su estado se vuelve "activo" y puede usar css para cambiar el color del botón a lo que desee. Todo lo que necesita hacer es agregar una regla css usando el selector ": activo". https://www.w3schools.com/cssref/sel_active.asp https://www.freecodecamp.org/news/css-button-style-hover-color-and-background/ Básicamente:
button:active { color: green; }Puedes probar de esta manera
<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)'; });