How to display an image with an if / else statement?

Question

How can I get an image to display after someone uses the tool?

Basically, you run the tool to see what carrier your phone is compatible with. Its currently very simple but I was hoping to have an image show up after you've selected your phone model and run the tool. For example, you select your carrier, and the iPhone 7 you own, I would like for an image of an iPhone 7 to be shown after it has been run.

I've tried a few examples on Stackoverflow but nothing seems to work as they are a bit different than the way this was built. If anyone could point me in the right direction or show me what to do, that would be legendary. Thanks

 function checkiPhoneCompatibility() { var wo$ = $; var carrier = wo$('#check-compatability-carrier').val(); var phone = wo$('#check-compatability-phone').val(); if (phone === '' || carrier === '') { wo$('#check-compatibility-message').html('Please select a carrier and phone model'); } else { var networks = ''; var search = ''; switch (phone) { case '5X': if (carrier === 'att') { networks = 'AT&T, T-Mobile, Sprint and Verizon'; search = ''; } if (carrier === 'sprint') { networks = 'Sprint, T-Mobile, Verizon and AT&T'; search = ''; } if (carrier === 'verizon') { networks = 'Verizon, T-Mobile, AT&T and Sprint'; search = ''; } if (carrier === 'tmobile') { networks = 'AT&T, Verizon, Sprint and T-Mobile'; search = ''; } break; case 'Nexus': if (carrier === 'att') { networks = 'AT&T, T-Mobile, Sprint and Verizon'; search = ''; } if (carrier === 'sprint') { networks = 'Sprint, T-Mobile, Verizon and AT&T'; search = ''; } if (carrier === 'verizon') { networks = 'Verizon, T-Mobile, AT&T and Sprint'; search = ''; } if (carrier === 'tmobile') { networks = 'T-Mobile, Verizon, Sprint and AT&T'; search = ''; } break; case '6P': if (carrier === 'att') { networks = 'AT&T, T-Mobile, Sprint and Verizon'; search = ''; } if (carrier === 'sprint') { networks = 'Sprint, T-Mobile, Verizon and AT&T'; search = ''; } if (carrier === 'verizon') { networks = 'Verizon, T-Mobile, AT&T and Sprint'; search = ''; } if (carrier === 'tmobile') { networks = 'T-Mobile, Verizon, Sprint and AT&T'; search = ''; } break; case 'Pixel': if (carrier === 'att') { networks = 'AT&T, T-Mobile, Sprint and Verizon'; search = ''; } if (carrier === 'sprint') { networks = 'Sprint, T-Mobile, Verizon and AT&T'; search = ''; } if (carrier === 'verizon') { networks = 'Verizon, T-Mobile, AT&T and Sprint'; search = ''; } if (carrier === 'tmobile') { networks = 'T-Mobile, Verizon, Sprint and AT&T'; search = ''; } break; case '530': if (carrier === 'att') { networks = 'AT&T, T-Mobile, Sprint and Verizon'; search = ''; } if (carrier === 'sprint') { networks = 'Sprint, T-Mobile, Verizon and AT&T'; search = ''; } if (carrier === 'verizon') { networks = 'Verizon, T-Mobile, AT&T and Sprint'; search = ''; } if (carrier === 'tmobile') { networks = 'T-Mobile, Verizon, Sprint and AT&T'; search = ''; } break; case '626s': if (carrier === 'att') { networks = 'AT&T, T-Mobile, Sprint and Verizon'; search = ''; } if (carrier === 'sprint') { networks = 'Sprint, T-Mobile, Verizon and AT&T'; search = ''; } if (carrier === 'verizon') { networks = 'Verizon, T-Mobile, AT&T and Sprint'; search = ''; } if (carrier === 'tmobile') { networks = 'T-Mobile, Verizon, Sprint and AT&T'; search = ''; } break; case '7': if (carrier === 'att') { networks = 'AT&T, T-Mobile, Sprint and Verizon'; search = ''; } if (carrier === 'sprint') { networks = 'Sprint, T-Mobile, Verizon and AT&T'; search = ''; } if (carrier === 'verizon') { networks = 'Verizon, T-Mobile, AT&T and Sprint'; search = ''; } if (carrier === 'tmobile') { networks = 'T-Mobile, Verizon, Sprint and AT&T'; search = ''; } break; case '6s': if (carrier === 'att') { networks = 'AT&T, T-Mobile, Sprint and Verizon'; search = ''; } if (carrier === 'sprint') { networks = 'Sprint, T-Mobile, Verizon and AT&T'; search = ''; } if (carrier === 'verizon') { networks = 'Verizon, T-Mobile, AT&T and Sprint'; search = ''; } if (carrier === 'tmobile') { networks = 'T-Mobile, Verizon, Sprint and AT&T'; search = ''; } break; default: networks = 'AT&T, Sprint, T-Mobile, and Verizon'; break; } wo$('#check-compatibility-icon, #check-compatibility-search').removeClass('hidden'); wo$('#check-compatibility-message').html('Your unlocked phone is compatible with these networks: <strong>' + networks + '</strong>'); wo$('#check-compatibility-search a').attr('href', '/CellPhones/Search?simonly=true' + search); } wo$('#check-compatibility-message-wrapper').removeClass('hidden'); if (wo$('body[data-frame-amp]').length > 0) { window.parent.postMessage({ sentinel: 'amp', type: 'embed-size', height: document.body.scrollHeight }, '*'); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-content-amp="Phone_Compatability_Checker"> <div class="well pad-y-0 mar-b-0"> <div class="row pad-y-4 bor-b-1"> <div class="col-xs-24"> <div class="font-7">Phone Compatibility Tool</div> </div> </div> <div class="row pad-y-4 bor-b-1"> <div class="col-md-12 col-lg-9"><strong>1)&nbsp;Which network&nbsp;did you purchase your phone from?</strong></div> <div class="col-md-10"> <select id="check-compatability-carrier" tabindex="-1" class="selectpicker pad-t-4-xs pad-t-4-sm" title="Select a carrier" data-width="100%"> <option value="att">AT&T</option> <option value="sprint">Sprint</option> <option value="tmobile">T-Mobile</option> <option value="verizon">Verizon</option> </select> </div> </div> <div class="row pad-y-4 bor-b-1"> <div class="col-md-12 col-lg-9"><strong>2)&nbsp;Which phone model did you purchase?</strong></div> <div class="col-md-10"> <select id="check-compatability-phone" tabindex="-1" class="selectpicker pad-t-4-xs pad-t-4-sm" title="Select Your Phone Model" data-width="100%"> <option value="5X">Google Nexus 5x</option> <option value="Nexus">Google Nexus 6</option> <option value="6P">Google Nexus 6P</option> <option value="Pixel">Google Pixel</option> <option value="530">HTC Desire 530</option> <option value="626s">HTC Desire 626s</option> <option value="7">iPhone 7 or iPhone 7 Plus</option> <option value="6s">iPhone 6s or iPhone 6s Plus</option> <option value="6">iPhone 6 or iPhone 6 Plus</option> <option value="se">iPhone SE</option> <option value="5s5c">iPhone 5s or iPhone 5c</option> <option value="5">iPhone 5</option> <option value="4">iPhone 4s or iPhone 4</option> <option value="Stylo">LG Stylo</option> <option value="Stylo2">LG Stylo 2, Stylo 2 Plus</option> <option value="K7">LG K7</option> <option value="K10">LG K10</option> <option value="V20">LG V20</option> <option value="G5">LG G5</option> <option value="Escape3">LG Escape 3</option> <option value="ELTE">Motorola Moto E, Moto E LTE</option> <option value="G4">Motorola Moto G4 Play</option> <option value="S7">Samsung Galaxy S7 or S7 Edge</option> <option value="S6">Samsung Galaxy S6, S6 Edge, S6 Edge +</option> <option value="S5">Samsung Galaxy S5</option> <option value="S4">Samsung Galaxy S4 or S4 Zoom</option> <option value="S3">Samsung Galaxy S3 or S3 Mini</option> <option value="Note">Samsung Galaxy Note 5, 4, 3, 2</option> <option value="Grand">Samsung Galaxy Grand Prime</option> <option value="Core">Samsung Galaxy Core Prime</option> <option value="J3">Samsung Galaxy J3</option> <option value="ZMax">ZTE Z Max Pro</option> <option value="GMax">ZTE Grand Max</option> </select> </div> </div> <div class="row pad-y-4"> <div class="col-sm-9 col-md-offset-9"> <button id="check-compatibility-button" type="button" class="btn btn-primary" onclick="checkiPhoneCompatibility();">Check Compatibility</button> </div> </div> <div class="row pad-y-4 bor-t-1 hidden" id="check-compatibility-message-wrapper"> <div class="col-md-19 col-md-offset-6 font-5"> <div class="col-sm-4 col-md-4 hidden-xs hidden-sm"><span id="check-compatibility-icon" class="fa fa-check c-green font-10 align-top hidden"></span></div> <div class="col-sm-20 col-md-16 pad-l-2-sm pad-l-2-md pad-l-0-lg"> <div id="check-compatibility-message" class="mar-t-0 pad-t-0"></div> <p id="check-compatibility-search" class="hidden"> <a href="javascript:;"><strong>Search plans now</strong></a> </p> </div> </div> </div> </div> 

Answer 1

Set up an empty image div and set it's src attribute based on the user input..

If(phone=="iphone7"){
$("#img").attr("src","iphone7.png");
}

Answer 2

You could check the value of the select and retrieve that value from a Javascript Object with the image source.

 $(function(){ var phoneImgs = {Nexus: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Nexus_6P.png/300px-Nexus_6P.png", Pixel: "https://www.jbhifi.com.au/FileLibrary/ProductResources/Images/191637-L-LO.jpg"}; phoneImgs["5X"] = "https://i-cdn.phonearena.com/images/phones/56080-specs/Google-Nexus-5X.jpg"; phoneImgs["6P"] = "https://images-na.ssl-images-amazon.com/images/I/81VK5hbPjzL._SL1500_.jpg"; phoneImgs["530"] = "https://cf4.s3.souqcdn.com/item/2016/03/16/10/29/91/30/item_XL_10299130_13050439.jpg"; phoneImgs["626s"] = "https://cdn2.gsmarena.com/vv/pics/htc/htc-desire-626s-5.jpg"; phoneImgs["7"] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTj8onnlgiZCKhdX2naEQQFNt0EjqrRQU1FFNEJgQym-vfsYeYe"; phoneImgs["6s"] = "https://images-na.ssl-images-amazon.com/images/I/71f2M-HuP4L._SL1500_.jpg"; phoneImgs["6"] = "https://cdn2.gsmarena.com/vv/bigpic/apple-iphone-6-4.jpg"; phoneImgs["se"] = "https://ss7.vzw.com/is/image/VerizonWireless/apple_iPhoneSE_Svr?$device-lg$"; phoneImgs["5s5c"] = "https://cdn2.gsmarena.com/vv/bigpic/apple-iphone-5s-ofic.jpg"; phoneImgs["5"] = "https://drop.ndtv.com/TECH/product_database/images/530201393615PM_635_apple_iphone_5.png"; phoneImgs["4"] = "https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP643/sp643_iphone4s_color_white.jpg"; phoneImgs["Stylo"] = "https://ss7.vzw.com/is/image/VerizonWireless/lg-stylo-2-v-pdp-key-features-2-d?&bgc=f6f6f6&scl=1&scl=2"; phoneImgs["Stylo2"] = "https://cdn2.gsmarena.com/vv/bigpic/lg-stylo2-1.jpg"; phoneImgs["K7"] = "https://cdn2.gsmarena.com/vv/bigpic/lg-k7.jpg"; phoneImgs["K10"] = "https://cdn2.gsmarena.com/vv/pics/lg/lg-k10-1.jpg"; phoneImgs["V20"] = "https://www.lg.com/us/images/cell-phones/md05779514/gallery/medium01.jpg"; phoneImgs["G5"] = "https://cdn2.gsmarena.com/vv/bigpic/lg-g5.jpg"; phoneImgs["Escape3"] = "https://images-na.ssl-images-amazon.com/images/I/31Budda2dfL._SL500_AC_SS350_.jpg"; phoneImgs["ELTE"] = "https://cdn2.gsmarena.com/vv/bigpic/motorola-moto-e-2015.jpg"; phoneImgs["G4"] = "https://i-cdn.phonearena.com/images/phones/62819-specs/Motorola-Moto-G4-Play.jpg"; phoneImgs["S7"] = "https://images.samsung.com/is/image/samsung/in-galaxy-s7-g930fd-sm-g930fzduins-000000001-front-gold?$PD_GALLERY_JPG$"; phoneImgs["S6"] = "https://drop.ndtv.com/TECH/product_database/images/312015113532PM_635_samsung_galaxy_s6_gold_platinum.jpeg"; phoneImgs["S5"] = "https://s7d2.scene7.com/is/image/SamsungUS/Pdpkeyfeature-sm-g900pzwabst-600x600-C1-062016?$product-details-jpg$"; phoneImgs["S4"] = "https://s7d2.scene7.com/is/image/SamsungUS/Pdpkeyfeature-sgh-i337zwaatt-600x600-C1-062016?$product-details-jpg$"; phoneImgs["S3"] = "https://drop.ndtv.com/TECH/product_database/images/5292013114707PM_635_samsung_galaxy_s_III.png"; phoneImgs["Note"] = "https://images.samsung.com/is/image/samsung/in-galaxy-note-5-n9208-sm-n9208zdvins-000000001-front-gold?$PD_GALLERY_JPG$"; phoneImgs["Grand"] = "https://images.samsung.com/is/image/samsung/pk-galaxy-grand-prime-plus-g532f-sm-g532fzkdpak-000000001-front-black?$PD_GALLERY_L_JPG$"; phoneImgs["Core"] = "https://s7d2.scene7.com/is/image/SamsungUS/Pdpkeyfeature-sm-s820lhaatfn-600x600-C1-062016?$product-details-jpg$"; phoneImgs["J3"] = "https://drop.ndtv.com/TECH/product_database/images/515201752004PM_635_samsung_galaxy_j3_2017.jpeg"; phoneImgs["ZMax"] = "https://cdn2.gsmarena.com/vv/pics/zte/ZTE-ZMax-Pro-5.jpg"; phoneImgs["GMax"] = "https://d28dq596ebml6z.cloudfront.net/media/catalog/product/cache/1/image/400x506.32911392405/9df78eab33525d08d6e5fb8d27136e95/z/7/z787_reflections.png"; document.getElementById("check-compatability-phone").addEventListener("change", function(e){ $('#phoneImg').show(); var phone = this.value; $('#phoneImg').prop('src', phoneImgs[phone]); }); }); 

 #phoneImg{ display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-content-amp="Phone_Compatability_Checker"> <div class="well pad-y-0 mar-b-0"> <div class="row pad-y-4 bor-b-1"> <div class="col-xs-24"> <div class="font-7">Phone Compatibility Tool</div> </div> </div> <div class="row pad-y-4 bor-b-1"> <div class="col-md-12 col-lg-9"><strong>1)&nbsp;Which network&nbsp;did you purchase your phone from?</strong></div> <div class="col-md-10"> <select id="check-compatability-carrier" tabindex="-1" class="selectpicker pad-t-4-xs pad-t-4-sm" title="Select a carrier" data-width="100%"> <option value="att">AT&T</option> <option value="sprint">Sprint</option> <option value="tmobile">T-Mobile</option> <option value="verizon">Verizon</option> </select> </div> </div> <div class="row pad-y-4 bor-b-1"> <div class="col-md-12 col-lg-9"><strong>2)&nbsp;Which phone model did you purchase?</strong></div> <div class="col-md-10"> <select id="check-compatability-phone" tabindex="-1" class="selectpicker pad-t-4-xs pad-t-4-sm" title="Select Your Phone Model" data-width="100%"> <option value="5X">Google Nexus 5x</option> <option value="Nexus">Google Nexus 6</option> <option value="6P">Google Nexus 6P</option> <option value="Pixel">Google Pixel</option> <option value="530">HTC Desire 530</option> <option value="626s">HTC Desire 626s</option> <option value="7">iPhone 7 or iPhone 7 Plus</option> <option value="6s">iPhone 6s or iPhone 6s Plus</option> <option value="6">iPhone 6 or iPhone 6 Plus</option> <option value="se">iPhone SE</option> <option value="5s5c">iPhone 5s or iPhone 5c</option> <option value="5">iPhone 5</option> <option value="4">iPhone 4s or iPhone 4</option> <option value="Stylo">LG Stylo</option> <option value="Stylo2">LG Stylo 2, Stylo 2 Plus</option> <option value="K7">LG K7</option> <option value="K10">LG K10</option> <option value="V20">LG V20</option> <option value="G5">LG G5</option> <option value="Escape3">LG Escape 3</option> <option value="ELTE">Motorola Moto E, Moto E LTE</option> <option value="G4">Motorola Moto G4 Play</option> <option value="S7">Samsung Galaxy S7 or S7 Edge</option> <option value="S6">Samsung Galaxy S6, S6 Edge, S6 Edge +</option> <option value="S5">Samsung Galaxy S5</option> <option value="S4">Samsung Galaxy S4 or S4 Zoom</option> <option value="S3">Samsung Galaxy S3 or S3 Mini</option> <option value="Note">Samsung Galaxy Note 5, 4, 3, 2</option> <option value="Grand">Samsung Galaxy Grand Prime</option> <option value="Core">Samsung Galaxy Core Prime</option> <option value="J3">Samsung Galaxy J3</option> <option value="ZMax">ZTE Z Max Pro</option> <option value="GMax">ZTE Grand Max</option> </select> </div> </div> <div class="row pad-y-4"> <div class="col-sm-9 col-md-offset-9"> <button id="check-compatibility-button" type="button" class="btn btn-primary" onclick="checkiPhoneCompatibility();">Check Compatibility</button> </div> </div> <div class="row pad-y-4 bor-t-1 hidden" id="check-compatibility-message-wrapper"> <div class="col-md-19 col-md-offset-6 font-5"> <div class="col-sm-4 col-md-4 hidden-xs hidden-sm"><span id="check-compatibility-icon" class="fa fa-check c-green font-10 align-top hidden"></span></div> <div class="col-sm-20 col-md-16 pad-l-2-sm pad-l-2-md pad-l-0-lg"> <div id="check-compatibility-message" class="mar-t-0 pad-t-0"></div> <p id="check-compatibility-search" class="hidden"> <a href="javascript:;"><strong>Search plans now</strong></a> </p> </div> </div> </div> </div> <img id="phoneImg" width="50" height="50" src="">