HTML-Javascript：使用Switchcase加载图片

Question

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>

Answer 1

The below snippet works. Select a option and click on Submit . Also, there are several issues with your code:

• You are missing the image element that will hold the image which is determined by the switch block
• You are missing the element with id 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>