Estoy trabajando en un sitio web y quiero que cuando el usuario haga clic en una tarjeta específica, se vuelva azul. He buscado y encontrado algunas cosas en línea, pero no me funciona y no sé por qué; aquí está el código:
<div class="card" onclick="myFunction()"> <p class="number-card">1</p> </div> <script> function myFunction() { document.getElementById("card").style.backgroundcolor = "blue"; } </script>document.querySelectorAll(".card") MDN querySelectorAllbackgroundColor con C mayúsculaon* controladores de atributos. JS y los estilos siempre deben estar en sus respectivas etiquetas o archivos, no diseminados alrededor de un archivo HTML. <div class="card"> <p class="number-card">1</p> </div> <div class="card"> <p class="number-card">2</p> </div> <script> const changeBgColor = (ev) => { ev.currentTarget.style.backgroundColor = "blue"; }; const EL_cards = document.querySelectorAll(".card"); EL_cards.forEach(EL => EL.addEventListener("click", changeBgColor)); </script> Alternativamente, usando una función normal (donde addEventListener lo vincula de forma predeterminada con this elemento Event.currentTarget ):
function changeBgColor() { this.style.backgroundColor = "blue"; }Solo tiene la clase configurada en tarjeta pero está tratando de getElementById, debe darle al div una identificación que sea única y cambiar la función.