How can I change the background image of an HTML id, via a radio button, using Javascript

I’m working on/struggling with some Javascript for a project. Currently I have only an index.html, which contains five sections, each with their own id, and each with a different background-image allocated to these sections.

I have a button in the footer, which when clicked, should change each of these section background-images to a different image.

The current background-image for #landingImage is DSC3719.jpg and I would want it to change to DSC7317.jpg, when I click the radio button.

Having watched hours of tutorial videos, I’m no further forward on how I should bring this idea together. The most recent tutorial I’ve watched has suggested using an if/else, with an alternative class for the background-image to be switched to. With this method in mind, I would have to use multiple classes, as the alternative image is different for each section. Is this correct?

I’m not looking for the code to be written for me, but a process on how to approach this issue.

I’d be grateful for any guidance!

Cheers.

#landingImage{
  background-image: url(../img/DSC3719.jpg);
  min-width:100%;
  min-height: 700px;
  position:relative;
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

 <div>
     <input class="switch" type="checkbox" value="" id="footerBtn">
     <label class="switch-btn" for="footerBtn"></label>
 </div>

Answer

…contains five sections, each with their own id, and each with a different background-image allocated to these sections.
I have a button in the footer, which when clicked, should change each of these section background-images to a different image.

How about toggling classes?

Here is how to change multiple images

In this SPECIFIC case, the images are all defined in the CSS. It is possible to use data-attributes, but in this case, I would prefer to keep all the image URLs in one place

Note I destruct the querySelectorAll since not all newer browsers support the forEach on an html collection

document.getElementById("footerBtn").addEventListener("click",function() {
  [...document.querySelectorAll(".coverImage")]
    .forEach(img => img.classList.toggle("checked",this.checked))
})

.coverImage {
  min-width: 100%;
  min-height: 700px;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#landingImage {
  background-image: url(https://via.placeholder.com/700?text=landing1.jpg);
}
#landingImage.checked {
  background-image: url(https://via.placeholder.com/700?text=landing2.jpg);
}

#otherImage {
  background-image: url(https://via.placeholder.com/700?text=other1.jpg);
}
#otherImage.checked {
  background-image: url(https://via.placeholder.com/700?text=other2.jpg);
}

<div>
  <input class="switch" type="checkbox" value="" id="footerBtn">
  <label class="switch-btn" for="footerBtn"></label>
</div>

<div id="landingImage" class="coverImage"></div>
<div id="otherImage" class="coverImage"></div>