how to: radio button changing opacity of image

Question

I'm trying to light an image up using javascript when a radiobutton is selected.

I tried it with a forEach function, but with the code given, all the images just change to opacity 1;

Also, when i refresh my page, the radiobutton is still selected.

 let img = document.querySelectorAll('.poll_img'); let radio = document.querySelectorAll('.radio_button'); radio.forEach(radioButton => { if (radioButton.checked = true){ img.forEach(image => { image.style.opacity = 1; }) } }) 

 <form class="poll_form" action=""> <div class="poll_bar"> <img class="poll_img poll_img1" src="assets/images/poll_bar-icon.svg" alt=""> <label class="radio_title" for="radio1">Atlantic Forest, South America </label><input class="radio_button" type="radio" name="group1" id="radio1"> <div class="check"></div> </div> <div class="poll_bar"> <img class="poll_img poll_img2" src="assets/images/poll_bar-icon.svg" alt=""> <label class="radio_title" for="radio2">Borneo Island, Southeast Asia </label><input class="radio_button" type="radio" name="group1" id="radio2"> <div class="check"></div> </div> </form> 

Answer 1

In JS = is for assign, not comparing. You need to use == .

The condition (line 5 in your JS code) should be

if (radioButton.checked == true) {...

or just

if (radioButton.checked)

Answer 2

Instead of iterating over the buttons whenever the JS runs the first time and setting the style then, you will want to set up event listeners to run a function whenever the radio buttons are selected.

I suspect you will also not want to iterate over all the images, but rather change the opacity for the image that goes with the particular radio button.

radio.forEach(r => {
  r.addEventListener("click", () => {
    let relatedImg = r.parentNode.querySelector("img");
    relatedImg.style.opacity = 1;
  }
})

If you want only the currently selected image to have the full opacity, you'd need to also run a function within the event that sets opacity back to 0 or whatever for all the other images.

Edit: a simple way to do that could be something like this.

radio.forEach(r => {
  r.addEventListener("click", () => {
    let relatedImg = r.parentNode.querySelector("img");
    updateImages(relatedImg);
  }
})

function updateImages(changedImg) {
  img.forEach(image => {
    if (image === changedImg) {
      image.style.opacity = 1;
    } else {
      image.style.opacity = 0;
    }
  }
}

Answer 3

        let radio = document.querySelectorAll('.radio_button');


    radio.forEach(r => {
        r.addEventListener("click", changeOpacity)
    });

}

changeOpacity = r => {
    const radio = r.currentTarget;
    let relatedImg = radio.parentNode.querySelector('img');
    relatedImg.style.opacity = 1;

    if(radio.checked == false){
        relatedImg.style.opacity = 0.3;
    }
}

The opacity changing works, but once selected, the image doesn't lower

Answer 4

You must assign an event to your radio input, You can do that using two methods

1. First

to include your js code in a function and call this function on your HTML HTML:

<form class="poll_form" action="">
    <div class="poll_bar">
      <img class="poll_img poll_img1" src="picture.png" alt="">
      <label class="radio_title" for="radio1">Atlantic Forest, South America
      </label><input onchange="lightUpPic()" class="radio_button" type="radio" name="group1" id="radio1">
      <div class="check"></div>
    </div>

    <div class="poll_bar">
      <img class="poll_img  poll_img2" src="picture.png" alt="">

      <label class="radio_title" for="radio2">Borneo Island, Southeast Asia
      </label><input onchange="lightUpPic()" class="radio_button" type="radio" name="group1" id="radio2">
      <div class="check"></div>
    </div>
  </form>

JS:

function lightUpPic(){
let img = document.querySelectorAll('.poll_img');
    let radio = document.querySelectorAll('.radio_button');
    radio.forEach(radioButton => {
        if (radioButton.checked == true){
            img.forEach(image => {
                image.style.opacity = 1;
            })
        }
    })
}

2. Second

To add Event Listener (addEventListener) to your radio inputs to execute the desired JS on click

Answer 5

i finally figured it out, thanks to Miles Grover.

{
const init = () => {

    let radiobutton = document.querySelectorAll('.radio_button');


    radiobutton.forEach(r => {
        r.addEventListener("change", changeOpacity);
    });


}

changeOpacity = r => {
    const radio = r.currentTarget;
    let relatedImg = radio.parentNode.querySelector('img');
    relatedImg.style.opacity = 1;

    unsetOpacity();
}

const unsetOpacity = () => {
    let radiobutton = document.querySelectorAll('.radio_button');
    radiobutton.forEach(r => {
        if(r.checked == false){
            let relatedImg = r.parentNode.querySelector('img');
            relatedImg.style.opacity = 0.1;
        }
    })
}

init();

}

Answer 6

Try this : it achieves the following

• at page loading all picture have opacity = 0.3
• On selecting radio button 1. picture 1 opacity = 1, rest = 0.3
• On Selecting radio button 2, pic 2 opacity = 1, rest = 0.3 .. etc

HTML:

<form class="poll_form" action="">
    <div class="poll_bar">
      <img class="poll_img  poll_img1" src="picture.png" alt="">
      <label class="radio_title" for="radio1">Atlantic Forest, South America
      </label><input onchange="lightUpPic(event)" class="radio_button" type="radio" name="group1" id="radio1">
      <div class="check"></div>
    </div>

    <div class="poll_bar">
      <img class="poll_img  poll_img2" src="picture.png" alt="">

      <label class="radio_title" for="radio2">Borneo Island, Southeast Asia
      </label><input onchange="lightUpPic(event)" class="radio_button" type="radio" name="group1" id="radio2">
      <div class="check"></div>
    </div>
  </form>

JS:

    let allImages = document.querySelectorAll('.poll_img');
allImages.forEach(i=> i.style.opacity=0.3);

function lightUpPic(evt){
    let imageNumber = evt.target.id.replace( /^\D+/g, '');
    let imgAssigned = document.querySelectorAll('.poll_img' + imageNumber);

    let radio = document.querySelectorAll('.radio_button');
    radio.forEach(radioButton => {
        if (radioButton.checked == true){
            allImages.forEach(image => {
                image.style.opacity = 0.3;
            })
            imgAssigned[0].style.opacity=1;

        }
    })
}