Una sugerencia en una publicación anterior fue simplificar las tediosas funciones que tengo. Aquí hay un ejemplo.
function cprChange(){ compRock.style.backgroundColor = 'gold'; compRock.style.color = '#414141'; } function cprChangeBack(){ compRock.style.backgroundColor = '#414141'; compRock.style.color = 'white'; } function cppChange(){ compPaper.style.backgroundColor = 'gold'; compPaper.style.color = '#414141'; } function cppChangeBack(){ compPaper.style.backgroundColor = '#414141'; compPaper.style.color = 'white' } function cpsChange(){ compScissors.style.backgroundColor = 'gold'; compScissors.style.color = '#414141'; } function cpsChangeBack(){ compScissors.style.backgroundColor = '#414141'; compScissors.style.color = 'white' }Estos son para mis juegos de piedra, papel o tijera. Básicamente, el usuario hace clic y elige piedra, papel o tijera, y tengo una función de computadora que elige uno al azar tan pronto como el usuario hace clic en uno de sus botones. Cuando la computadora elige, las funciones de cambio cambian el color del botón, y las funciones de cambio hacia atrás devuelven el botón a su color original cuando el usuario hace clic en el siguiente botón, que es piedra, papel o tijera. Para simplificar esto, quería hacer algo como esto.
function colorChange(element){ element.style.backgroundColor = 'gold'; element.style.color = '#414141'; }Sin embargo, cuando implemento esto, no parece funcionar. ¿Qué estoy haciendo mal?
La forma más fácil de cambiar los colores es a través de css.
En mi caso, acabo de crear una clase activa que cambia el color predeterminado cuando tienen una clase activa. Luego, con JS, cambio la clase activa al hacer clic.
document.querySelectorAll(".item").forEach(item => { item.addEventListener("click", (e) => { e.target.classList.toggle("active"); }); }); .item { background-color: #414141; color: white; padding: 15px; } .item.active { background-color: gold; color: #414141; } <div class="rock item active">Rock</div> <div class="paper item">Paper</div> <div class="scissors item">Scissors</div>