I want to make a program using switchcase Javascript to load an image. But I have an issue to how to load the image to the switchcase script, need your help or advice to do that :)
<div align='center'>
<fieldset>
<legend><b>Detail Onsite</b></legend>
Dari :
<select class='form-control'>
<option value='co'>Cyber Office</option>
</select><br><br/></br>
Tujuan PM :
<select class='form-control' id='tujuan' name='tujuan'>
<option value='abb'>ABB Sakti Industri</option>
<option value='ace'>ACE Life Assurance</option>
</select><br><br/></br>
<a href='javascript:void(0)' id='submit'>Submit</a>
<script>
document.getElementById('submit').onclick = function(){
document.getElementById('output').style.display = "block";
var myImage = document.getElementById('tujuan');
var tujuan = document.getElementById('tujuan').value;
switch(tujuan){
case "abb":
myImage("abb.jpg");
break;
case "ace":
myImage("ace.jpg");
break;
case "cigna":
myImage("cigna.jpg");
break;
}
}
</script>
</body>
</html>
The below snippet works. Select a option
and click on Submit
. Also, there are several issues with your code:
image
element that will hold the image which is determined by the switch
block output
so I have simply taken a <span>
element with that id for this example. myImage
is not a setter function which you are calling like myImage("abb.jpg");
. This will not set any values. document.getElementById('submit').onclick = function(){ document.getElementById('output').style.display = "block"; var imageHolder = document.getElementById('imageLink'); var myImage = document.getElementById('tujuan'); var tujuan = document.getElementById('tujuan').value; switch(tujuan){ case "abb": imageHolder.src = "http://4.bp.blogspot.com/-bbubO_FJ7Qk/ToW1yQSzZhI/AAAAAAAAABY/k23rQV4C_Qg/s1600/free.jpg"; break; case "ace": imageHolder.src = "http://www.allyou.com/sites/default/files/image/2014/01/300x300/i/2010/09/freesample-m.jpg"; break; break; case "cigna": imageHolder.src = "http://4.bp.blogspot.com/-bbubO_FJ7Qk/ToW1yQSzZhI/AAAAAAAAABY/k23rQV4C_Qg/s1600/free.jpg"; break; break; } }
<div align='center'> <fieldset> <legend><b>Detail Onsite</b></legend> Dari : <select class='form-control'> <option value='co'>Cyber Office</option> </select><br><br/></br> Tujuan PM : <select class='form-control' id='tujuan' name='tujuan'> <option value='abb'>ABB Sakti Industri</option> <option value='ace'>ACE Life Assurance</option> </select><br><br/></br> <image id='imageLink' src='' alt='Image here'/> <a href='javascript:void(0)' id='submit'>Submit</a> <span id='output'></span>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.