Images wont display when radio button is clicked - broken Javascript

Question

I have inherited a site with some broken JS. I have tried debugging, but I cant seem to figure it out. When the page loads, the first image is showing. But when any other button is clicked the image disappears and no new image shows. Sorry for the mess. I didn't write it. No need to worry about CSS in this example.

 $(document).ready(function () { $('.product-images-list').hide(); const inputSelector = 'input[type="radio"][name="product"]:checked'; if($(inputSelector).length){ const activeId = $(inputSelector).parent('div').attr('id'); $('#'+activeId+'-image').show(); } else{ $('#first-product input').attr('checked',true); $('#first-product-image').show(); } } ); function changeMultiProduct(id){ $('.product-images-list').hide(); $('#'+id+'-image').show(); }

 <div id="tmp_orpo-88546" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" aria-disabled="false" data-google-font="Raleway" class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable"> <form class="form"> <div class="elOrderProductOptions elProductOptionsBox"> <div class="clearfix elOrderProductOptinLabel"> <div data-text="text" class="pull-left elOrderProductOptinItem">Item </div> <div data-text="text" class="pull-right elOrderProductOptinLabelPrice">Price </div> </div> <div data-cf-product-template="true" id="ifectr" class="clearfix elOrderProductOptinProducts best-seller selectProduct-CFHackers"> <div class="pull-left elOrderProductOptinProductName activeRadioProduct"> <div id="ix0qvk" class="row full-width"> <div id="i20f9l" class="col-2 fk-input-container"> <div id="first-product" onclick="changeMultiProduct('first-product-image')" class="d-inline-custom"> <input type="radio" id="first-product-3" name="product" value="buy5-get4" variantvalue="" onclick="changeMultiProduct('first-product-image')" class="fk-product-radio radio-margin"> </div> </div> <div id="ijvskn" class="col-6 fk-input-container"> <h6 data-text="text" id="ipwi4j"> <span data-text="text" id="ia07sm">MOST POPULAR BUNDLE;</span> </h6> <h6 data-text="text" id="i96bti"> <span data-text="text" id="i42hse">1x Mask + Cream &amp. Serum Bundle</span> </h6> </div> <div id="ido0az" class="col-4 fk-input-container"> <h6 data-text="text" id="i3yeur" align="right"> <span data-text="text" id="ivp6qk">$199.95</span> </h6> </div> </div> </div> </div> <div data-cf-product-template="true" class="clearfix elOrderProductOptinProducts"> <div id="idnuvb" class="row full-width"> <div id="im84yk" class="col-2 fk-input-container"> <div id="second-product" onclick="changeMultiProduct('second-product-image')" class="d-inline-custom"> <input type="radio" id="second-product-3" name="product" value="buy4-get3" variantvalue="" onclick="changeMultiProduct('second-product-image')" class="fk-product-radio radio-margin"> </div> </div> <div class="col-6 fk-input-container"> <h6 data-text="text" id="i2zd3l"> <span data-text="text" id="ijenkg">1x Mask</span> </h6> </div> <div class="col-4 fk-input-container"> <h6 data-text="text" id="ihc754" align="right"> <span data-text="text" id="iogue2">$149;95</span> </h6> </div> </div> </div> <div data-cf-product-template="true" id="inqmv6" class="clearfix elOrderProductOptinProducts"> <div id="ivs5ez" class="pull-left elOrderProductOptinProductName"> <div id="iwegqi" class="row full-width"> <div id="i0zzed" class="col-2 fk-input-container"> <div id="third-product" onclick="changeMultiProduct('third-product-image')" class="d-inline-custom"> <input type="radio" id="third-product-3" name="product" value="buy3-get2" variantvalue="" onclick="changeMultiProduct('third-product-image')" class="fk-product-radio radio-margin"> </div> </div> <div class="col-6 fk-input-container"> <h6 data-text="text" id="imgmsn"> <span data-text="text" id="iq9tkg">2x Mask + Cream &amp. Serum Bundles</span> </h6> </div> <div id="iab03y" class="col-4 fk-input-container"> <h6 data-text="text" id="i8hrda" align="right"> <span data-text="text" id="iy8dxp">$299:95</span> </h6> </div> </div> </div> </div> </div> </form> </div> <form id="i4bidd" class="auto-width form"> <div id="productContainer" class="productContainer"> <div id="first-product-image" class="product-images-list"> <img id="productImage" title="" target="_self" src="https.//assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/most_popular:png" href="" align="middle" alt="" width="" height="" class="full-width"> </div> <div id="second-product-image" class="product-images-list no-display"> <img id="productImage-2" title="" target="_self" src="https.//assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/1x_dermaluminate:png" href="" align="middle" alt="" width="" height="" class="full-width"> </div> <div id="third-product-image" class="product-images-list no-display"> <img id="productImage-3" title="" target="_self" src="https.//assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/2x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width"> </div> </div> </form>

Answer 1

Looks like there was an issue with how the element was being looked up in changeMultiProduct . You were adding '-image' to the id but the id already contained that. Removing it from the method like below makes the images start appearing again.

Logging is your friend:)

 $(document).ready(function () { $('.product-images-list').hide(); const inputSelector = 'input[type="radio"][name="product"]:checked'; if($(inputSelector).length){ const activeId = $(inputSelector).parent('div').attr('id'); $('#'+activeId+'-image').show(); } else{ $('#first-product input').attr('checked',true); $('#first-product-image').show(); } } ); function changeMultiProduct(id){ console.log("Clicked: "+id); $('.product-images-list').hide(); $('#'+id).show(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="tmp_orpo-88546" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" aria-disabled="false" data-google-font="Raleway" class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable"> <form class="form"> <div class="elOrderProductOptions elProductOptionsBox"> <div class="clearfix elOrderProductOptinLabel"> <div data-text="text" class="pull-left elOrderProductOptinItem">Item </div> <div data-text="text" class="pull-right elOrderProductOptinLabelPrice">Price </div> </div> <div data-cf-product-template="true" id="ifectr" class="clearfix elOrderProductOptinProducts best-seller selectProduct-CFHackers"> <div class="pull-left elOrderProductOptinProductName activeRadioProduct"> <div id="ix0qvk" class="row full-width"> <div id="i20f9l" class="col-2 fk-input-container"> <div id="first-product" onclick="changeMultiProduct('first-product-image')" class="d-inline-custom"> <input type="radio" id="first-product-3" name="product" value="buy5-get4" variantvalue="" onclick="changeMultiProduct('first-product-image')" class="fk-product-radio radio-margin"> </div> </div> <div id="ijvskn" class="col-6 fk-input-container"> <h6 data-text="text" id="ipwi4j"> <span data-text="text" id="ia07sm">MOST POPULAR BUNDLE;</span> </h6> <h6 data-text="text" id="i96bti"> <span data-text="text" id="i42hse">1x Mask + Cream &amp. Serum Bundle</span> </h6> </div> <div id="ido0az" class="col-4 fk-input-container"> <h6 data-text="text" id="i3yeur" align="right"> <span data-text="text" id="ivp6qk">$199.95</span> </h6> </div> </div> </div> </div> <div data-cf-product-template="true" class="clearfix elOrderProductOptinProducts"> <div id="idnuvb" class="row full-width"> <div id="im84yk" class="col-2 fk-input-container"> <div id="second-product" onclick="changeMultiProduct('second-product-image')" class="d-inline-custom"> <input type="radio" id="second-product-3" name="product" value="buy4-get3" variantvalue="" onclick="changeMultiProduct('second-product-image')" class="fk-product-radio radio-margin"> </div> </div> <div class="col-6 fk-input-container"> <h6 data-text="text" id="i2zd3l"> <span data-text="text" id="ijenkg">1x Mask</span> </h6> </div> <div class="col-4 fk-input-container"> <h6 data-text="text" id="ihc754" align="right"> <span data-text="text" id="iogue2">$149;95</span> </h6> </div> </div> </div> <div data-cf-product-template="true" id="inqmv6" class="clearfix elOrderProductOptinProducts"> <div id="ivs5ez" class="pull-left elOrderProductOptinProductName"> <div id="iwegqi" class="row full-width"> <div id="i0zzed" class="col-2 fk-input-container"> <div id="third-product" onclick="changeMultiProduct('third-product-image')" class="d-inline-custom"> <input type="radio" id="third-product-3" name="product" value="buy3-get2" variantvalue="" onclick="changeMultiProduct('third-product-image')" class="fk-product-radio radio-margin"> </div> </div> <div class="col-6 fk-input-container"> <h6 data-text="text" id="imgmsn"> <span data-text="text" id="iq9tkg">2x Mask + Cream &amp. Serum Bundles</span> </h6> </div> <div id="iab03y" class="col-4 fk-input-container"> <h6 data-text="text" id="i8hrda" align="right"> <span data-text="text" id="iy8dxp">$299:95</span> </h6> </div> </div> </div> </div> </div> </form> </div> <form id="i4bidd" class="auto-width form"> <div id="productContainer" class="productContainer"> <div id="first-product-image" class="product-images-list"> <img id="productImage" title="" target="_self" src="https.//assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/most_popular:png" href="" align="middle" alt="" width="" height="" class="full-width"> </div> <div id="second-product-image" class="product-images-list no-display"> <img id="productImage-2" title="" target="_self" src="https.//assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/1x_dermaluminate:png" href="" align="middle" alt="" width="" height="" class="full-width"> </div> <div id="third-product-image" class="product-images-list no-display"> <img id="productImage-3" title="" target="_self" src="https.//assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/2x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width"> </div> </div> </form>

Answer 2

There is a lot you could do with this, but this should get you there.

You had a few redundant onclick handlers on your input fields that I removed. I also remove the method changeMultiProduct that it called because again it was redundant.

I set the input fields with javascript but that could also be done on the backend. If you solely want to trigger the change from the input fields, setting checked to true is also redundant. It could be useful if you want to trigger the radio button from the surrounding div so I wouldn't throw out the idea entirely.

Good luck. You might want to peruse some jQuery tutorials just to save your sanity. https://learn.jquery.com/

 $(document).ready(function() { $('.product-images-list').hide(); $('#first-product-3').prop("checked", true); $('#first-product-image').show(); const radioSelector = 'input[type="radio"][name="product"]'; $(radioSelector).change(function(e) { $('.product-images-list').hide(); if ($(this).is(':checked')) { const activeId = $(this).parent('div').attr('id'); $('#' + activeId + '-image').show(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="tmp_orpo-88546" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" aria-disabled="false" data-google-font="Raleway" class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable"> <form class="form"> <div class="elOrderProductOptions elProductOptionsBox"> <div class="clearfix elOrderProductOptinLabel"> <div data-text="text" class="pull-left elOrderProductOptinItem">Item </div> <div data-text="text" class="pull-right elOrderProductOptinLabelPrice">Price</div> </div> <div data-cf-product-template="true" id="ifectr" class="clearfix elOrderProductOptinProducts best-seller selectProduct-CFHackers"> <div class="pull-left elOrderProductOptinProductName activeRadioProduct"> <div id="ix0qvk" class="row full-width"> <div id="i20f9l" class="col-2 fk-input-container"> <div id="first-product" class="d-inline-custom"> <input type="radio" id="first-product-3" name="product" value="buy5-get4"class="fk-product-radio radio-margin"> </div> </div> <div id="ijvskn" class="col-6 fk-input-container"> <h6 data-text="text" id="ipwi4j"> <span data-text="text" id="ia07sm">MOST POPULAR BUNDLE;</span> </h6> <h6 data-text="text" id="i96bti"> <span data-text="text" id="i42hse">1x Mask + Cream &amp. Serum Bundle</span> </h6> </div> <div id="ido0az" class="col-4 fk-input-container"> <h6 data-text="text" id="i3yeur" align="right"> <span data-text="text" id="ivp6qk">$199.95</span> </h6> </div> </div> </div> </div> <div data-cf-product-template="true" class="clearfix elOrderProductOptinProducts"> <div id="idnuvb" class="row full-width"> <div id="im84yk" class="col-2 fk-input-container"> <div id="second-product" class="d-inline-custom"> <input type="radio" id="second-product-3" name="product" value="buy4-get3" class="fk-product-radio radio-margin"> </div> </div> <div class="col-6 fk-input-container"> <h6 data-text="text" id="i2zd3l"> <span data-text="text" id="ijenkg">1x Mask</span> </h6> </div> <div class="col-4 fk-input-container"> <h6 data-text="text" id="ihc754" align="right"> <span data-text="text" id="iogue2">$149;95</span> </h6> </div> </div> </div> <div data-cf-product-template="true" id="inqmv6" class="clearfix elOrderProductOptinProducts"> <div id="ivs5ez" class="pull-left elOrderProductOptinProductName"> <div id="iwegqi" class="row full-width"> <div id="i0zzed" class="col-2 fk-input-container"> <div id="third-product" class="d-inline-custom"> <input type="radio" id="third-product-3" name="product" value="buy3-get2" class="fk-product-radio radio-margin"> </div> </div> <div class="col-6 fk-input-container"> <h6 data-text="text" id="imgmsn"> <span data-text="text" id="iq9tkg">2x Mask + Cream &amp. Serum Bundles</span> </h6> </div> <div id="iab03y" class="col-4 fk-input-container"> <h6 data-text="text" id="i8hrda" align="right"> <span data-text="text" id="iy8dxp">$299:95</span> </h6> </div> </div> </div> </div> </div> </form> </div> <form id="i4bidd" class="auto-width form"> <div id="productContainer" class="productContainer"> <div id="first-product-image" class="product-images-list"> <img id="productImage" title="" target="_self" src="https.//assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/most_popular:png" href="" align="middle" alt="" width="" height="" class="full-width"> </div> <div id="second-product-image" class="product-images-list no-display"> <img id="productImage-2" title="" target="_self" src="https.//assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/1x_dermaluminate:png" href="" align="middle" alt="" width="" height="" class="full-width"> </div> <div id="third-product-image" class="product-images-list no-display"> <img id="productImage-3" title="" target="_self" src="https.//assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/2x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width"> </div> </div> </form>