用开关盒改变图像JavaScript

Question

基本上我试图设置一些调色板，当你点击其中一个'颜色'时，它会给出不同的图像。

然而，目前的一种颜色，当点击它作为反对只是答案本身即答案[0]应该colour1

难道我做错了这里返回文本答案阵列？

小提琴附着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>

Answer 1

删除内联JavaScript和使用事件侦听器来代替，而一个类添加到您想要点击的图像。

修复开关/箱实际检查从输入而不是整个数组中的值

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>