Question

我正在使用单选按钮并根据所选的单选按钮显示图像。但不知何故，我收到图像数组的错误。我只会显示两张图片并且与正确的值不符。是我的数组或html中的错误？ EXAMPLE

自行车参考：

JS

<script>
 function check_value(val) { 
       var imgs = ['images/bike1.jpg', 'images/bike2.jpg', 'images/bike3.jpg'];
       var img = imgs[val];
       var el = document.getElementById("imgBox");
       if (img) {
         el.src = img;
         el.style.display = "";
       }

     }
</script>

HTML

<form name="builder">
   <input type="radio" name="field" value="1" onclick='check_value(1)'/> KAWASAKI KX 450F<br />
   <input type="radio" name="field" value="2" onclick='check_value(2)'/> 2010 Yamaha Road Star S<br />
   <input type="radio" name="field" value="3" onclick='check_value(3)'/> Aprilia RSV4<br />
</form>

<img id="imgBox" src="#" style="display:none">

Answer 1

数组是零索引的。你应该致电：

check_value(0)

获得第一项，第二项获得1，第三项获得2。

注意选择第一个项目如何加载第二个图像，第二个项目加载第三个图像。

Answer 2

数组从索引0开始，因此您有以下选择：

使用imgs[val-1]
将您的数组更改为[null, "img1", "img2 ...]
以img0

然而，更好的方法是：

function check_value(val) {
    var el = document.getElementById("imgBox");
    if (val>0 && val<4) { //will trigger when [1,2,3], modify it according to your needs
        el.src = "images/bike" + val + ".jpg";
        el.style.display = "";
    }
}

Answer 3

Javascript数组从0开始编码并上升。所以

<form name="builder">
   <input type="radio" name="field" value="1" onclick='check_value(1)'/> KAWASAKI KX 450F<br />
   <input type="radio" name="field" value="2" onclick='check_value(2)'/> 2010 Yamaha Road Star S<br />
   <input type="radio" name="field" value="3" onclick='check_value(3)'/> Aprilia RSV4<br />
</form>

应该是

<form name="builder">
   <input type="radio" name="field" value="1" onclick='check_value(0)'/> KAWASAKI KX 450F<br />
   <input type="radio" name="field" value="2" onclick='check_value(1)'/> 2010 Yamaha Road Star S<br />
   <input type="radio" name="field" value="3" onclick='check_value(2)'/> Aprilia RSV4<br />
</form>

Javascript：图像不匹配单选按钮的值

3 个答案: