Radio Buttons and Images - HTML/JavaScript Question

1

I created a form that has four radio buttons always showing options a user can choose.
Thing is, the questions are stored as images and displayed above the radio buttons in an image slider.

When I change the picture, and a user chooses one of the four radio buttons, how could I associate that response with the image being displayed?

2

You’re not providing much detail so answers can’t be very detailed. I don’t know if you’re keeping track of the state of the slideshow or just using a library to animate a set of images.

Assuming you’re animating this sideshow with jQuery it’s likely easiest to attach a function to the submit handler of your form that inspects the slideshow for the currently active image.

3

Thanks @cjsheets.

This is what it looks like, building ontop of an example in w3 (whilst doing my HTML in freeCodeCamp) so I added the radio buttons at the base… http://www.w3schools.com/code/tryit.asp?filename=FCMYFMZVMY2T

(I haven’t gotten to the jQuery part of my freeCodeCamp learning just yet).

4

@cjsheets this part of your response “inspects the slideshow for the currently active image”… yes. This is what I need to figure out how to do. Once I can capture the active image, I think I should be able to store that along with the response in an array.

5

jQuery will help make binding listeners easier.

If you move your <script> tag to the end of the page (right before </body>) you can use something like this.

<script>
[....]

var tags = document.getElementsByTagName("input");
for (i = 0; i < tags.length; i++) {
  tags[i].addEventListener("click", checkDivs);
}

function checkDivs(){
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
     if(x[i].style.display == "block")
     	alert('The image is: ' + x[i].src);
  }
}
</script>
6

@cjsheets thanks. Going to try it out.