Soy nuevo en desarrollo web y solo estoy haciendo algunos ejercicios relacionados con HTML, CSS y Javascript. He creado un botón en mi archivo html y quiero cambiar el color del botón si se hace clic en él.
Este es mi código HTML:
<button id="box" style="padding: 20px; background-color: black;"></button>Este es mi código Javascript:
document.addEventListener('click', event => { if (event.target.id === 'box') { document.style.backgroundColor="red"; } })No estoy muy seguro de por qué no está funcionando.
el document no tiene una propiedad de style (al menos, no de forma predeterminada en los navegadores que cumplen con las especificaciones). Tu consola de desarrollador debería informarte de esto con un mensaje similar a:
Uncaught TypeError: Cannot set properties of undefined (setting 'backgroundColor')
En su lugar, sea un poco más específico en cuanto al color de fondo del elemento que le gustaría cambiar. En el siguiente ejemplo, modifiqué su código para apuntar a document.body , que tiene un elemento de style :
document.addEventListener('click', event => { if (event.target.id === 'box') { document.body.style.backgroundColor="red"; } }) <button id="box" style="padding: 20px; background-color: black;"></button>