通过javascript的imageSwap onClick无法触发

Question

As can be demonstrated in the following example

A script that swaps images (generated via a Rails <%= javascript_tag do %> tag)

<script>
//<![CDATA[

$("input[type=radio]").on("change", function() {
      var Frame_image = $("input[name=Frame]:checked").val();
      $("#Frame").attr("src", "/Mirra_2/small/Frame_" +  Frame_image  + ".png");
})

//]]>
</script>

based on source (snippet)

<table> <tr>
  <td style='vertical-align: top;'>
      <label><input type="radio" class='imagepick' id="Frame_6K8" name="Frame" value="6K8"><img src="/assets/Mirra_2/colours/6K8-f0d0fc886240ff430ef97b3f98ac23bf26f290b772bcb840460549cd61d15028.jpg" />Studio White / H-Alloy</label>
  </td>
  <td style='vertical-align: top;'>
    <label><input type="radio" class='imagepick' id="Frame_6K7" name="Frame" value="6K7"><img src="/assets/Mirra_2/colours/6K7-8052fe7aa605d525981035af0c1367d1d3808390b63bb29437f515cc63b58e8c.jpg" />Graphite / H-Alloy</label>
  </td> [...]

note the initial images are in the first section of the body

The javascript is not generating any errors in the console. The images to swap for exist. Yet, clicking upon choices does not lead to the image swap.

Why is that?

Answer 1

With problems like these, take the time to debug your code and see what is going wrong and verify that you are getting the results you expect at each step.

If you had added console.log() calls like these, you would have quickly discovered that you have no element with the Frame id.

$("input[type=radio]").on("change", function() {

      var Frame_image = $("input[name=Frame]:checked").val();
      console.log(Frame_image);
      console.log("#Frame");
      $("#Frame").attr("src", "/Mirra_2/small/Frame_" +  Frame_image  + ".png");
})