スイッチケースで画像を変更するJavaScript

Question

基本的に私はいくつかのカラーパレットを設定しようとしていますが、「カラー」のいずれかをクリックすると別の画像が表示されます。

はしかし、現在はちょうど答え自体すなわち答えに反対するとして、それはテキストで回答の配列を返す色のいずれかをクリックしたときに[0]

をcolour1しなければならない私はここで何か間違ったことをしたのでしょうか。

フィドルは

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>

Answer 1

インラインJavaScriptを取り外し、代わりにイベントリスナーを使用し

https://jsfiddle.net/t0kmchw4/1/を添付し、あなたがクリックした画像にクラスを追加します。

実際にあなたが渡している、 `スイッチ/ case`間違っを使用している入力からの値の代わりに、配列全体

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>