Having trouble with my script.

KoolAide187

12-27-2010, 05:16 AM

I am not great at using JavaScript but I am working on it. I really need help with my script. I can't seem to find out why my images won't load correctly.
I am trying to get a 2 part radio button selection to show different pictures for every combination of colors you can choose. So if I was to pick black and black a black_black.jpg picture will pop up and black_white.jpg will pop up for a black and white selection. Please if anybody can help I could really use it right now. Thanks!

<html>
<body>
<form name = "myform">
<img id = "myImage" src = "MyDefaultImage.jpg">
<br><br>
Barrels: -------- Inserts:<br>

Black <input type = "radio" name = "col1" value = "black" onclick = "showImage();"> Black <input type = "radio" name = "col2" value = "black" onclick = "showImage();"><br>
White <input type = "radio" name = "col1" value = "white" onclick = "showImage();"> White <input type = "radio" name = "col2" value = "white" onclick = "showImage();"><br>
Orange <input type = "radio" name = "col1" value = "orange" onclick = "showImage();"> Orange <input type = "radio" name = "col2" value = "orange" onclick = "showImage();"><br>
Red <input type = "radio" name = "col1" value = "red" onclick = "showImage();"> Red <input type = "radio" name = "col2" value = "red" onclick = "showImage();"><br>
</form>
<br>
<br>
<script type = "text/javascript">
function showImage() {
var A = 0;
var B = 0;
for (var i=0; i <document.myform.col1.length; i++) {
if (document.myform.col1[i].checked) {
A = document.myform.col1[i].value;
}
}
for (var u=0; u <document.myform.col2.length; u++) {
if (document.myform.col2[u].checked) {
B = document.myform.col2[u].value;
}
}
var x = A + "_" + B;
if (x>0) {
var picture = x + ".jpg";
document.getElementById("myImage").src = picture;
}
}
</script>
</body>
</html>

devnull69

12-27-2010, 07:12 AM

It's a small but nevertheless critical bug :o
Use

if(x) {

instead of

if(x>0) {

KoolAide187

12-27-2010, 07:35 AM

OMG!!!! You're awesome! it's fixed. It's crazy after going forum to forum it's just a little bitty bug like that, that was causing all my frustration!. Devnull you're the man!!!!

Old Pedant

12-27-2010, 08:08 PM

Ummm...actually, that test of x is pointless, at that point in the code!!!

You do:

var x = A + "_" + B;
if (x) {
...

But NO MATTER whether the variables A and B are both zero, x will *ALWAYS* be defined!!!

Even if A and B are both NULL, x will *AT LEAST* be "_"!

But in your code, as it is now, if A and B are both zero, then x will be "0_0" and, again, will never be null.

So there is NO POINT AT ALL in making the test for the value of x, as you are doing it.

I think you need to do the check differently, completely:

...
if ( A != 0 && B != 0 )
{
document.getElementById("myImage").src = A + "_" + B + ".jpg";
}

And get rid of variable x, since it is doing nothing useful.