I'm working on a project that changes the background image when a color is clicked on the screen, however I cannot get the javascript to work. I added a function to each "color". So far, I am trying to change the yellow box to change the background image when I click on it but it doesn't work. I'm not sure what I'm doing wrong. [![js file][1]][1]
Any suggestions are welcome!
Here is my html code for the body:
<!-- <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>The URL in your code is not valid (document.body.style.backgroundImage = 'url(../img/summer.jpg)')... otherwise, it should work?