how can I change the background image when I click on a color?-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

The URL in your code is not valid (document.body.style.backgroundImage = 'url(../img/summer.jpg)')... otherwise, it should work?