Question

I am currently working with displaying images based on the value chosen from a radio button. But I am currently running into a wall with making the code as short and efficient as possible. I have several categories to choose from and they way i am approaching the issue will require for me to write several check_value#. Is there a way to combine those two functions? so in the future if i have 5 or 7 categories i wont have to have a function for each. EXAMPLE

<script>
 function check_value(val) {     
    var el = document.getElementById("imgBox1");
    var img = imgs[val];
    if (val>0 && val<4) { //will trigger when [1,2,3]
        el.src = "images/bike" + val + ".jpg";
        el.style.display = "";
    }    
}

 function check_value1(val) {    
    var el = document.getElementById("imgBox2");
    var img = imgs[val];
    if (val>0 && val<4) { //will trigger when [1,2,3]
        el.src = "images/tire" + val + ".jpg";
        el.style.display = "";
    }    
}
</script>    

HTML

<h2>Choose a bike</h2>
    <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>

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

<h2>Choose a tire</h2>  
    <form name="tire">
        <input type="radio" name="field" value="1" onclick='check_value1(0)'/> Michelin Pilot Road 3 Tires<br />
        <input type="radio" name="field" value="2" onclick='check_value1(1)'/> Dunlop Roadsmart Sport-Touring Tires<br />
         <input type="radio" name="field" value="3" onclick='check_value1(2)'/> Pirelli Scorpion Trail Tires<br />
    </form>

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

Answer 1

try this, updated

make image name as bike#.jpg , tire#.jpg
bike0.jpg, bike1.jpg, bike2.jpg….

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

}

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

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

<h2>Choose a tire</h2>  
<form name="tire">
    <input type="radio" name="field" value="1" onclick='check_value(0, 2, "tire")'/> Michelin Pilot Road 3 Tires<br />
    <input type="radio" name="field" value="2" onclick='check_value(1, 2, "tire")'/> Dunlop Roadsmart Sport-Touring Tires<br />
    <input type="radio" name="field" value="3" onclick='check_value(2, 2, "tire")'/> Pirelli Scorpion Trail Tires<br />
</form>

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