Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Having trouble with my script.

    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!

    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    It's a small but nevertheless critical bug
    Use
    Code:
    if(x) {
    instead of
    Code:
    if(x>0) {

  • Users who have thanked devnull69 for this post:

    KoolAide187 (12-27-2010)

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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!!!!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    Ummm...actually, that test of x is pointless, at that point in the code!!!

    You do:
    Code:
    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:
    Code:
        ...
        if ( A != 0 && B != 0 )
        {
            document.getElementById("myImage").src = A + "_" + B + ".jpg";
        }
    And get rid of variable x, since it is doing nothing useful.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •