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

Ask Question

How can I get an image to display after someone uses the tool? asked 1 month ago

Basically, you run the tool to see what carrier your phone is compatible with. Its currently very simple viewed 38 times
0
but I was hoping to have an image show up after you've selected your phone model and run the active 1 month ago
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 FEATURED ON META
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 Updated comment flagging -
Supporting the new Code of Conduct
Come Take a Look at our New
function checkiPhoneCompatibility() { Contributor Indicator!
var wo$ = $;
var carrier = wo$('#check-compatability-carrier').val(); HOT META POSTS
var phone = wo$('#check-compatability-phone').val();
if (phone === '' || carrier === '') { 94 Clicking code of conduct link raises flag
wo$('#check-compatibility-message').html('Please select a carrier and phone model'
24 Comment Classification Survey
} else {
var networks = ''; 8 White gap after Stackoverflow website
var search = ''; toolbar with Desktop mode displaying
switch (phone) { by…
case '5X':
6 How can I improve these questions to
if (carrier === 'att') {
get rid of down votes?
networks = 'AT&T, T-Mobile, Sprint and Verizon';
search = '';
}
if (carrier === 'sprint') { Related
networks = 'Sprint, T-Mobile, Verizon and AT&T';
search = ''; How do JavaScript closures work?
7654
}
if (carrier === 'verizon') {
6752 How do I check if an element is hidden in
networks = 'Verizon, T-Mobile, AT&T and Sprint';
jQuery?
search = '';
}
4960 How do I remove a property from a
if (carrier === 'tmobile') {
JavaScript object?
networks = 'AT&T, Verizon, Sprint and T-Mobile';
search = ''; 7737 How do I redirect to another webpage?
}
break;
1739 Lazy load of images in ListView
case 'Nexus':
if (carrier === 'att') {
networks = 'AT&T, T-Mobile, Sprint and Verizon'; 4201 How do I include a JavaScript file in
search = ''; another JavaScript file?
}
7436 How to check whether a string contains a
if (carrier === 'sprint') {
substring in JavaScript?
networks = 'Sprint, T-Mobile, Verizon and AT&T';
search = '';
6237 How do I remove a particular element from
}
an array in JavaScript?
if ( i i ) {
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 4376 How do I return the response from an
<div data-content-amp="Phone_Compatability_Checker"> asynchronous call?
<div class="well pad-y-0 mar-b-0">
<div class="row pad-y-4 bor-b-1"> 646 if else statement in AngularJS templates
<div class="col-xs-24">
<div class="font-7">Phone Compatibility Tool</div>
</div> Hot Network Questions
</div>
<div class="row pad-y-4 bor-b-1"> One dimension equivalent to area
<div class="col-md-12 col-lg-9"><strong>1)&nbsp;Which network&nbsp;did you purchas
<div class="col-md-10"> If I farm, I'm a farmer. But if I guard, I'm a guard?
<select id="check-compatability-carrier" tabindex="-1" class="selectpicker pad Should I clock in if computer started updating?
<option value="att">AT&T</option>
<option value="sprint">Sprint</option> What are my chances of rolling a natural 19/20
<option value="tmobile">T-Mobile</option> critical if I roll 3d20?
<option value="verizon">Verizon</option>
</select> What are the pros and cons of having your own
UPS attached to your own server hosted in a data
</div>
center?
</div>
<div class="row pad-y-4 bor-b-1"> Simple Op-Amp setup for current sense has a
<div class="col-md-12 col-lg-9"><strong>2)&nbsp;Which phone model did you purchase strange working range
<div class="col-md-10">
By 18 years of age, I want a brand new car that's
<select id="check-compatability-phone" tabindex="-1" class="selectpicker pad-t
$43,668
<option value="5X">Google Nexus 5x</option>
<option value="Nexus">Google Nexus 6</option> Move a column conveniently
<option value="6P">Google Nexus 6P</option>
<option value="Pixel">Google Pixel</option> How can a portal that connects two planets affect
<option value="530">HTC Desire 530</option> the environment?
<option value="626s">HTC Desire 626s</option> How is no password more secure than
<option value="7">iPhone 7 or iPhone 7 Plus</option> username+password?
<option value="6s">iPhone 6s or iPhone 6s Plus</option>
<option value="6">iPhone 6 or iPhone 6 Plus</option> What does cut return if the specified field does not
<option value="se">iPhone SE</option> exist?
<option value="5s5c">iPhone 5s or iPhone 5c</option> Drained battery; iminent explosion?
<option value="5">iPhone 5</option>
<option value="4">iPhone 4s or iPhone 4</option> Filter integers in numpy float array
<option value="Stylo">LG Stylo</option>
i i Does the Thunderbolt strike feature still work if the
target is immune to lightning damage?
Run code snippet Copy snippet to answer Expand snippet
What is the correct style that describes the
following images

Is Neil de Grasse Tyson's claim that the Gregorian

javascript image function if-statement calendar is the "most accurate calendar ever
devised" true?
share edit close flag edited Jul 26 at 20:54 asked Jul 26 at 20:47 Duty Free in the USA. Why do I have to be given
Calvin Nunes soccer_mullet my purchase as I board the plane?
2,759 2 8 28 1 1
German equivalents to the prefix "re"?
add a comment
During peer-review, should I comment on the
authors' messy code?
start a bounty
How to respond when a Doctor's Receptionist
asks the reason for the appointment, after
2 Answers active oldest votes confirming appointment is made?

Company claims hardwire connections are a

security issue

Set up an empty image div and set it's src attribute based on the user input.. What is the name of the sound that a coin makes
when hitting coins collected in a jar?

1 If(phone=="iphone7"){
$("#img").attr("src","iphone7.png");
In the Dragonlance setting, can a dragon
recognize that a player character is a wizard?
}
Asking an exam question that requires a specific
technique
share edit flag answered Jul 26 at 20:56
Me1o question feed
138 6

@soccer_mullet you are welcome 👍 – Me1o Jul 27 at 19:00

If this Answer was helpful mark it as answers.. – Me1o Jul 27 at 19:02

add a comment

You could check the value of the select and retrieve that value from a Javascript Object with the
image source.
0
$(function(){
var phoneImgs = {Nexus: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Nex
phoneImgs["5X"] = "https://i-cdn.phonearena.com/images/phones/56080-specs/Google-Nexus
phoneImgs["6P"] = "https://images-na.ssl-images-amazon.com/images/I/81VK5hbPjzL._SL150
phoneImgs["530"] = "https://cf4.s3.souqcdn.com/item/2016/03/16/10/29/91/30/item_XL_102
phoneImgs["626s"] = "https://cdn2.gsmarena.com/vv/pics/htc/htc-desire-626s-5.jpg";
phoneImgs["7"] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTj8onnlgiZCKhd
phoneImgs["6s"] = "https://images-na.ssl-images-amazon.com/images/I/71f2M-HuP4L._SL150
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?$de
phoneImgs["5s5c"] = "https://cdn2.gsmarena.com/vv/bigpic/apple-iphone-5s-ofic.jpg";
phoneImgs["5"] = "https://drop.ndtv.com/TECH/product_database/images/530201393615PM_63
phoneImgs["4"] = "https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP643/sp64
phoneImgs["Stylo"] = "https://ss7.vzw.com/is/image/VerizonWireless/lg-stylo-2-v-pdp-ke
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/medium
phoneImgs["G5"] = "https://cdn2.gsmarena.com/vv/bigpic/lg-g5.jpg";
phoneImgs["Escape3"] = "https://images-na.ssl-images-amazon.com/images/I/31Budda2dfL._
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-Mot
phoneImgs["S7"] = "https://images.samsung.com/is/image/samsung/in-galaxy-s7-g930fd-sm-
phoneImgs["S6"] = "https://drop.ndtv.com/TECH/product_database/images/312015113532PM_6
phoneImgs["S5"] = "https://s7d2.scene7.com/is/image/SamsungUS/Pdpkeyfeature-sm-g900pzw
phoneImgs["S4"] = "https://s7d2.scene7.com/is/image/SamsungUS/Pdpkeyfeature-sgh-i337zw
phoneImgs["S3"] = "https://drop.ndtv.com/TECH/product_database/images/5292013114707PM_
phoneImgs["Note"] = "https://images.samsung.com/is/image/samsung/in-galaxy-note-5-n920
phoneImgs["Grand"] = "https://images.samsung.com/is/image/samsung/pk-galaxy-grand-prim
phoneImgs["Core"] = "https://s7d2.scene7.com/is/image/SamsungUS/Pdpkeyfeature-sm-s820l
phoneImgs["J3"] = "https://drop.ndtv.com/TECH/product_database/images/515201752004PM_6
phoneImgs["ZMax"] = "https://cdn2.gsmarena.com/vv/pics/zte/ZTE-ZMax-Pro-5.jpg";
phoneImgs["GMax"] = "https://d28dq596ebml6z.cloudfront.net/media/catalog/product/cache
document.getElementById("check-compatability-phone").addEventListener("change", funct
$('#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 pur
<div class="col-md-10">
<select id="check-compatability-carrier" tabindex="-1" class="selectpicker
<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 purc
<div class="col-md-10">
<select id="check-compatability-phone" tabindex="-1" class="selectpicker p
<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>
i i

Run code snippet Copy snippet to answer Expand snippet

share edit flag edited Jul 26 at 21:34 answered Jul 26 at 21:14

hev1
1

appreciate the effort on this answer, super helpful! – soccer_mullet Jul 27 at 18:59

@soccer_mullet No problem. – hev1 Jul 27 at 19:48

add a comment

Your Answer

community wiki

Post Your Answer

Not the answer you're looking for? Browse other questions tagged javascript image function

if-statement or ask your own question.

STACK OVERFLOW PRODUCTS COMPANY STACK EXCHANGE Blog Facebook Twitter LinkedIn
NETWORK
Questions Teams About
Technology
Jobs Talent Press
Life / Arts
Developer Jobs Directory Engagement Work Here
Culture / Recreation
Salary Calculator Enterprise Legal
Science
Help Privacy Policy
Other
Mobile Contact Us site design / logo © 2018 Stack Exchange Inc; user contributions
licensed under cc by-sa 3.0 with attribution required.
Disable Responsiveness rev 2018.8.30.31447