CODEWITHSUNDEEP
javascripthtml
Mochamad Rinaldy Aulia
Mochamad Rinaldy Aulia

Reputation: 33

HTML-Javascript : Use Switchcase to load picture

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>

Upvotes: 0

Views: 51

Answers (1)

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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>

Upvotes: 1

Related Questions