I am a bit confused with the switch statement, i need it for my home page. I’ll explain shortly: i have two groups of radio buttons on my html code, each consisting of three buttons. According to the button selected an image will be shown (means three different images for one group and three different for the other). There are shown also two images at a time. This works with my code so far. What I would like to do next is to show a third image according to the combination of buttons chosen. This is my code so far
<html>
<head>
<title>Radio-Buttons</title>
</head>
<body>
<h1>Testing</h1>
<script language='JavaScript' type='text/javascript'>
function check_value(fieldvalue)
{
switch(fieldvalue)
{
case 1:
document.getElementById("imagedest").innerHTML = "<img src='image1.jpg'>";
break;
case 2:
document.getElementById("imagedest").innerHTML = "<img src='image2.png'>";
break;
case 3:
document.getElementById("imagedest").innerHTML = "<img src='image3.jpg'>";
break;
}
}
function check_other_value(fieldvalue)
{
switch(fieldvalue)
{
case 1:
document.getElementById("imagedest2").innerHTML = "<img src='image4.jpg'>";
break;
case 2:
document.getElementById("imagedest2").innerHTML = "<img src='image5.png'>";
break;
case 3:
document.getElementById("imagedest3").innerHTML = "<img src='image6.jpg'>";
}
}
</script>
<form name='test'>
<input type="radio" name="field" value="one" onclick='check_value(1)'>one
<input type="radio" name="field" value="two" onclick='check_value(2)'>two
<input type="radio" name="field" value="three" onclick='check_value(3)'>three
</form>
<div id='imagedest'>
</div>
<form name='tests'>
<input type="radio" name="fields" value="one" onclick='check_other_value(1)'>one
<input type="radio" name="fields" value="two" onclick='check_other_value(2)'>two
<input type="radio" name="fields" value="three" onclick='check_other_value(3)'>three
</form>
<div id='imagedest2'>
</div>
</body>
</html>
This code works for what i descrived previously. I thought on using an “if” statement to check the first case selected, but as far as i understand, after the “breaks” the function “erases” everything and starts from 0.
Can anybody give me an idea on how to make it work?
Thank you,
Jordi
You have to pass both values to a third function and do whatever checks you need to do there.
How you pass the values depends on how you trigger the changes. You can also get the values with
document.getElementById("fieldID").value, depending on your HTML.