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

Question

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>

Are you want custom radio button using javascript and css. this might helps https://ej2.syncfusion.com/documentation/radio-button/how-to/customize-radiobutton-appearance/ — Rayees AC, Sep 23 '20 at 11:19
@RayeesAC _"I'm ... looking for ... a process on how to approach this issue."_ - How does it help OP to use a library for this? — Andreas, Sep 23 '20 at 11:22

pilchard · Answer 1 · 2020-09-23T12:17:05.373

You can do this with CSS using the :checked pseudo class and a sibling combinator.

#landingImage{
  background-image: url("https://via.placeholder.com/150/0000FF/808080");
  min-width:100%;
  min-height: 700px;
  position:relative;
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.switch:checked ~ #landingImage {
  background-image: url("https://via.placeholder.com/150/FF0000/FFFFFF");
}

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

As commented, the CSS solution may become cumbersome with multiple images to change.

To implement this in javascript you can store the intended alternate image src in a data attribute in the HTML and then iterate over the relevant elements on checkbox change.

HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or Node.setUserData().

Using data attributes

function toggleImages() {
  // get all elements with class 'alt-image'
  const altImages = document.querySelectorAll('.alt-image');
  // iterate over the resulting NodeList
  altImages.forEach(image => {
    // check if the image has been switched
    if (!image.classList.contains('alt-active')) {
      // if not, get the alt-src from the data attribute
      const altsrc = image.getAttribute('data-alt-src');
      // set the alt url on the element
      image.style.backgroundImage = `url("${altsrc}")`;
      // add a class indicating it has been toggled
      image.classList.add('alt-active');
    } else {
      // if so, set the url to '' (the src specified in the CSS will be used)
      image.style.backgroundImage = '';
      // remove the active class
      image.classList.remove('alt-active');
    }
  });
}

// query the document for the toggle switch
const toggle = document.querySelector('.switch');

// add onchange listener to the toggle
toggle.addEventListener('change', toggleImages, false);

.container {
  display: flex;
  justify-content: space-between;
}
.alt-image {
  height: 40vh;
  width: 20vw;
  padding: 16px;
  position:relative;
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

#landing1{
  background-image: url("https://via.placeholder.com/150/000F0F");
}
 #landing2{
  background-image: url("https://via.placeholder.com/150/FFFF00");
}
#landing3{
  background-image: url("https://via.placeholder.com/150/FF00F8");
}
#landing4{
  background-image: url("https://via.placeholder.com/150/808080");
}

<div class="container">
<div id="landing1" class="alt-image" data-alt-src="https://via.placeholder.com/150/0000FF"></div>
<div id="landing2" class="alt-image" data-alt-src="https://via.placeholder.com/150/FF0000"></div>
<div id="landing3" class="alt-image" data-alt-src="https://via.placeholder.com/150/FFFF00"></div>
<div id="landing4" class="alt-image" data-alt-src="https://via.placeholder.com/150/000000"></div>
</div>
<div>
    <input class="switch" type="checkbox" value="" id="footerBtn">
    <label class="switch-btn" for="footerBtn"></label>
 </div>

And if he need to change many section image? OP: _should change each of these section background-images_ — Simone Rossaini, Sep 23 '20 at 11:33
I would personally prefer to not have data-attributes to keep the image URLs in the same place. — mplungjan, Sep 23 '20 at 12:18

score 0 · Answer 2 · answered Sep 23 '20 at 11:20

0

As you can see in my example i add onChange for use my function everytime checkbox is checked, and simple change background.

function ChangeBG(checkbox){
  const landingImage = document.getElementById('landingImage');
  if(checkbox.checked){
    landingImage.style.backgroundImage = "url('https://via.placeholder.com/150')";
  }else{
    landingImage.style.backgroundImage = "url('../img/DSC3719.jpg')";
  }
}

#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" onChange="ChangeBG(this);">
     <label class="switch-btn" for="footerBtn"></label>
 </div>
 
 
 <div id="landingImage"></div>

answered Sep 23 '20 at 11:20

Simone Rossaini

8,115
1
13
34

You are welcome ;) when you can acept my answer please. – Simone Rossaini Sep 23 '20 at 11:38
This would have to repeat code for each of the 5 images . Also not recommended to have inline event handlers – mplungjan Sep 23 '20 at 11:42
Why repeat the code for each? just create the variable and add it in the `IF` – Simone Rossaini Sep 23 '20 at 11:43
_Also not recommended to have inline event handlers_ why? – Simone Rossaini Sep 23 '20 at 11:44
You will have background image in the CSS AND in the JavaScript AND have to maintain both. – mplungjan Sep 23 '20 at 11:44
1

Ah yes @mplungjan, re: the **onChange**, the tutorial did mention inline event handling. So it'd be the same with onClick then. – Sep 23 '20 at 11:45
`document.getElementById("footerBtn").addEventListener("click",function() {})` is the preferred method. You can discuss click or change - I prefer click since older browsers did not react to the change event until blur – mplungjan Sep 23 '20 at 11:46

score 0 · Answer 3 · answered Sep 23 '20 at 11:25

0

The missing step could be:

You need to bind an event handler to the checkbox. Very easy is the onclick event: https://www.w3schools.com/howto/howto_js_display_checkbox_text.asp
You need to change the background image: change background image in body (The first answer uses jQuery, scroll down for vanilla JS)

answered Sep 23 '20 at 11:25

PotatoesFall

345
2
7

1

Whilst this may theoretically answer the question, [it would be preferable](//meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – mplungjan Sep 23 '20 at 11:43
1

Thank you @PotatoesFall for the link! I suppose what I didn't include in my initial question was the idea of using eventHandlers as opposed to onclick, which was also suggested by another user. By all means, very grateful for your input! – Sep 23 '20 at 12:16

mplungjan · Accepted Answer · 2020-09-23T12:23:14.990

...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>

`id` has a higher specificity than class. You could use `#landingImage.checked` — pilchard, Sep 23 '20 at 11:32
Incredible. Sincerely thank you all for this breakdown. I've been really struggling with Javascript, and this was the first of many issues I need to tackle. — , Sep 23 '20 at 12:06

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

4 Answers4