Estoy trabajando en un proyecto que cambia la imagen de fondo cuando se hace clic en un color en la pantalla, sin embargo, no puedo hacer que JavaScript funcione. Agregué una función a cada "color". Hasta ahora, estoy tratando de cambiar el cuadro amarillo para cambiar la imagen de fondo cuando hago clic en él, pero no funciona. No estoy seguro de lo que estoy haciendo mal. [![archivo js][1]][1]
¡Cualquier sugerencia es bienvenida!
Aquí está mi código html para el cuerpo:
<!-- <img src="img/paint.png" alt="generic cat"> --> <h2>Remote</h2> <ul> <li id="yellow"></li> <li id="green"></li> <li id="blue"></li> <li id="lavender"></li> </ul> ``` https://codepen.io/wendy1717/pen/XWVgbzM [1]: https://i.stack.imgur.com/Lnbcc.png const container = document.querySelector("#container"); function changeBackground(selectedClass){ container.className = selectedClass; } #container{ height: 100vh; background-size: cover; background-position:center; } .bg1{ background-image:url("https://imgs.search.brave.com/zT6fsauHvUuegWh8svCh_UOhRy5X58QaP_ibYrYWvVM/rs:fit:759:225:1/g:ce/aHR0cHM6Ly90c2Ux/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5O/YmZQRUNBNjR4YkZu/bVc1OE1iV0RRSGFF/byZwaWQ9QXBp"); } .bg2{ background-image: url("https://imgs.search.brave.com/1vyWK4rOTmbxmlR3kj2W1YuzyTr_gWc--205IVnC5L0/rs:fit:632:225:1/g:ce/aHR0cHM6Ly90c2U0/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5i/aDd6cHZzUzdFWlU5/NzB3Y0t6N21nSGFG/aiZwaWQ9QXBp") } .bg3{ background-image: url("https://imgs.search.brave.com/Mv-UYNkZSBt0cx2hNpomYJFVS2tKh-UohoGMWY4LaPw/rs:fit:632:225:1/g:ce/aHR0cHM6Ly90c2Uz/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC4t/VzQ2MzU4aGowLVFk/dmsyeW45VElBSGFG/aiZwaWQ9QXBp") } .bg4{ background-image: url("https://imgs.search.brave.com/tCv_y1U67Wzg7I14UkXyw8JoIhRFEBNT7D86WELQvYU/rs:fit:759:225:1/g:ce/aHR0cHM6Ly90c2Uz/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5p/U3UyUmNDY2RtNzh4/YnhOREpNSlNnSGFF/byZwaWQ9QXBp") } ul{ list-style: none; } ul > li button{ margin-bottom: 10px; padding: 5px; } <div id= "container"> <h2>Remote</h2> <ul> <li id="yellow" onclick="changeBackground('bg1')" > <button style="background-color: yellow">Change Background</button> </li> <li id="green" onclick="changeBackground('bg2')"> <button style="background-color: green">Change Background</button> </li> <li id="blue" onclick="changeBackground('bg3')"> <button style="background-color: blue">Change Background</button> </li> <li id="lavender" onclick="changeBackground('bg4')"> <button style="background-color: lavender">Change Background</button> </li> </ul> </div>La URL en su código no es válida ( document.body.style.backgroundImage = 'url(../img/summer.jpg)' )... de lo contrario, ¿debería funcionar?