Guide to: Implementing Radio Buttons to Adjust Image Opacity

Question

Guide to: Implementing Radio Buttons to Adjust Image Opacity

How can I dynamically change the opacity of an image using JavaScript when a radio button is clicked?

I attempted to achieve this using a forEach function, but the current code causes all images to instantly switch to opacity 1;

Additionally, after refreshing the page, the radio button remains 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>

javascript html css

Answer 1

Answer №1

Instead of simply styling the buttons with JS on initial load, it is better to set up event listeners that trigger functions when a radio button is selected.

It would be more efficient to target and adjust the opacity of only the corresponding image instead of looping through all the images every time.

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

To ensure only the selected image remains fully opaque, you can implement a function within the event listener to reset the opacity of other images.

Edit: Here's a simple way to achieve 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 2

Instead of simply styling the buttons with JS on initial load, it is better to set up event listeners that trigger functions when a radio button is selected.

It would be more efficient to target and adjust the opacity of only the corresponding image instead of looping through all the images every time.

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

To ensure only the selected image remains fully opaque, you can implement a function within the event listener to reset the opacity of other images.

Edit: Here's a simple way to achieve 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

Answer №2

When working with JavaScript, remember that the single equal sign = is used for assignment, not comparison. To compare two values, you should use a double equal sign ==.

For example, in line 6 of your JS code, the condition should be written as:

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

or simply as:

if (checkbox.checked)

Answer 4

When working with JavaScript, remember that the single equal sign = is used for assignment, not comparison. To compare two values, you should use a double equal sign ==.

For example, in line 6 of your JS code, the condition should be written as:

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

or simply as:

if (checkbox.checked)

Answer 5

Answer №3

        const radioButtons = document.querySelectorAll('.radio_button');

    radioButtons.forEach(button => {
        button.addEventListener("click", adjustOpacity);
    });

}

adjustOpacity = button => {
    const selectedButton = button.currentTarget;
    let targetImage = selectedButton.parentNode.querySelector('img');
    targetImage.style.opacity = 1;

    if(selectedButton.checked == false){
        targetImage.style.opacity = 0.4;
    }
}

Although the opacity changes correctly, once an option is chosen, the image does not return to original low opacity.

Answer 6

        const radioButtons = document.querySelectorAll('.radio_button');

    radioButtons.forEach(button => {
        button.addEventListener("click", adjustOpacity);
    });

}

adjustOpacity = button => {
    const selectedButton = button.currentTarget;
    let targetImage = selectedButton.parentNode.querySelector('img');
    targetImage.style.opacity = 1;

    if(selectedButton.checked == false){
        targetImage.style.opacity = 0.4;
    }
}

Although the opacity changes correctly, once an option is chosen, the image does not return to original low opacity.

Answer 7

Answer №4

To make your radio input functional, you have two options:

1. First

You can encapsulate your JavaScript code within a function and then call this function in your HTML like so:

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

In your JavaScript file:

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

Alternatively, you can add an Event Listener to each of your radio inputs to trigger the desired JavaScript function upon clicking.

Answer 8

To make your radio input functional, you have two options:

1. First

You can encapsulate your JavaScript code within a function and then call this function in your HTML like so:

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

In your JavaScript file:

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

Alternatively, you can add an Event Listener to each of your radio inputs to trigger the desired JavaScript function upon clicking.

Answer 9

Answer №5

After finally finding the solution, credit goes to Miles Grover for helping me figure it out.

{
const start = () => {

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

    radiobuttons.forEach(rb => {
        rb.addEventListener("change", adjustOpacity);
    });
}

adjustOpacity = rb => {
    const radioBtn = rb.currentTarget;
    let relatedImage = radioBtn.parentNode.querySelector('img');
    relatedImage.style.opacity = 1;

    resetOpacity();
}

const resetOpacity = () => {
    let radiobuttons = document.querySelectorAll('.radio_button');
    radiobuttons.forEach(rb => {
        if(rb.checked == false){
            let img = rb.parentNode.querySelector('img');
            img.style.opacity = 0.1;
        }
    })
}

start();

}

Answer 10

After finally finding the solution, credit goes to Miles Grover for helping me figure it out.

{
const start = () => {

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

    radiobuttons.forEach(rb => {
        rb.addEventListener("change", adjustOpacity);
    });
}

adjustOpacity = rb => {
    const radioBtn = rb.currentTarget;
    let relatedImage = radioBtn.parentNode.querySelector('img');
    relatedImage.style.opacity = 1;

    resetOpacity();
}

const resetOpacity = () => {
    let radiobuttons = document.querySelectorAll('.radio_button');
    radiobuttons.forEach(rb => {
        if(rb.checked == false){
            let img = rb.parentNode.querySelector('img');
            img.style.opacity = 0.1;
        }
    })
}

start();

}

Answer 11

Answer №6

Here's a neat trick to achieve the following:

When the page loads, all pictures have an opacity of 0.3
Upon selecting radio button 1, picture 1's opacity becomes 1 while the rest stay at 0.3
Similarly, selecting radio button 2 changes picture 2's opacity to 1 and the others to 0.3... and so on

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;

        }
    })
}

Answer 12

Here's a neat trick to achieve the following:

When the page loads, all pictures have an opacity of 0.3
Upon selecting radio button 1, picture 1's opacity becomes 1 while the rest stay at 0.3
Similarly, selecting radio button 2 changes picture 2's opacity to 1 and the others to 0.3... and so on

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;

        }
    })
}

Guide to: Implementing Radio Buttons to Adjust Image Opacity

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Tips for addressing Navbar collision with body content or other pages using CSS

Tips for organizing three flexbox divs in a horizontal row

Whenever a query is entered, each letter creates a new individual page. What measures can be taken to avoid this?

The website is having trouble reading the local json file accurately

I recently realized that my website has a strong Björk influence when viewed in IE. Any suggestions for what I should do next

Is it possible to implement Ajax functionality in JavaScript without using XMLhttp and connection the same socket for every request?

Steps for choosing an image and embedding it within a div element

Display HTML in JavaScript without altering the Document Object Model

The method item.appendChild does not exist as a function

A quick and easy way to locate the object tag along with the param, and insert the embed tag within an HTML document is

Guide for integrating the shadcn/ui Range Date Picker within a Form

How can I turn off the animation for a q-select (quasar select input)?

Tips for turning on a gaming controller before using it

Determine whether the elements within an array are present on the webpage. If they are, display an alert. If not, reload the page

Overlapping Divs and Colliding Elements

Acquire Formik Validation for the Current Year and Beyond

Using Leaflet JS to implement multiple waypoints on a map

What is the best way to extract URL query parameters and store them in a MySQL database using Node.js and Express

What causes the 'find' query to return a Query object instead of the expected data in MongoDB?

The appearance of CSS can vary depending on the screen resolutions in which it is