CODEWITHSUNDEEP
javascripthtml
Stuart Pontins
Stuart Pontins

Reputation: 285

Changing image with switch case JavaScript

Basically I'm trying to set up some colour palettes and when you click on one of the 'colours' it would give a different image.

However, currently when clicking on one of the colours it returns the answers array in text as oppose to just the answer itself i.e. answers[0] should be colour1

Have I done something wrong here?

Fiddle attached https://jsfiddle.net/t0kmchw4/1/

function change() {
       var image = "";
       var colour1 = document.getElementsByTagName("input")[0].value;
       var colour2 = document.getElementsByTagName("input")[1].value;
       var colour3 = document.getElementsByTagName("input")[2].value;
       var colour4 = document.getElementsByTagName("input")[3].value;
       var colour5 = document.getElementsByTagName("input")[4].value;
       var colour6 = document.getElementsByTagName("input")[5].value;
    
       var answers = [
                      colour1, 
                      colour2, 
                      colour3, 
                      colour4, 
                      colour5, 
                      colour6
                     ];
    
       switch(answers) {
       case answers[0]:
           image='<img src="http://smallbeerpress.com/wp-content/uploads/itunes.png"></img>';
           break;
       case answers[1]:
           image='<img src="http://fc01.deviantart.net/fs29/f/2009/238/d/8/Small_50x50__png_clock_pic_by_counter_countdown_ip.png"></img>';
           break;
       case answers[2]:
           image='<img src="http://a.deviantart.net/avatars/r/a/rachelsrandomart.gif?12"></img>';
           break;
    
       default:
           image='<img src="#!"></img>';
       }
    
       document.getElementById("output-image").innerHTML = image;
}
<input type="image" value="colour1" onclick="change()" />
<input type="image" value="colour2" onclick="change()" />
<input type="image" value="colour3" onclick="change()" />
<input type="image" value="colour4" onclick="change()" />
<input type="image" value="colour5" onclick="change()" />
<input type="image" value="colour6" onclick="change()" />
<div id="output-image"></div>

Upvotes: 2

Views: 5709

Answers (1)

adeneo
adeneo

Reputation: 318342

Remove the inline javascript, and use event listeners instead, and the add a class to the images you want to click.

Fix the switch/case to actually check for the values from the input instead of the entire array

var images = document.querySelectorAll('.img');

for (var i = images.length; i--;) images[i].addEventListener('click', change);

function change() {
  switch (this.value) {
    case "colour1":
      image = '<img src="http://smallbeerpress.com/wp-content/uploads/itunes.png"></img>';
      break;
    case "colour2":
      image = '<img src="http://fc01.deviantart.net/fs29/f/2009/238/d/8/Small_50x50__png_clock_pic_by_counter_countdown_ip.png"></img>';
      break;
    case "colour3":
      image = '<img src="http://a.deviantart.net/avatars/r/a/rachelsrandomart.gif?12"></img>';
      break;

    default:
      image = '<img src="#!"></img>';
  }

  document.getElementById("output-image").innerHTML = image;
}
<input type="image" class="img" value="colour1" />
<input type="image" class="img" value="colour2" />
<input type="image" class="img" value="colour3" />
<input type="image" class="img" value="colour4" />
<input type="image" class="img" value="colour5" />
<input type="image" class="img" value="colour6" />

<div id="output-image">
</div>

Upvotes: 2

Related Questions