JavaScript Switch statement: checking 2 cases at a time
Question
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
2 answers
solution1
1 ACCPTED 2013-01-26 11:10:12
You have to pass both values to a third function and do whatever checks you need to do there.
function check_third_value( field1, field2 )
{
if( field1 == 1 && field2 == 2 ) {
// do something
} else if( field1 == 2 && field2 == 2 ) {
// do something else
} else if...
}
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.
solution2
0 2013-01-26 11:20:45
Call me simple, but why don't you just do it like this:
function updateImage(value_1, value_2) {
document.getElementById("image_1").innerHTML = '<img src="img_1_' + value_1 + 'jpg">';
document.getElementById("image_2").innerHTML = '<img src="img_2_' + value_2 + 'jpg">';
document.getElementById("image_3").innerHTML = '<img src="img_3_' + value_1 + '_' + value_2 + 'jpg">';
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.