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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Location
    Portland, OR
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Buttons Changing Variable Problem

    New to Javascript, browsed the forums here and made some progress and got my buttons to function, but I'm having trouble getting the buttons to change a variable's value.

    Code:
    Here's the Javascript:
    var speed=7;
    
    function minusSpeed(){
    	speed=speed--;
    alert(speed);
    }
    function plusSpeed(){
    	speed=speed++;
    alert(speed);
    }
    
    
    Here's the HTML:
    <button type = "submit" onClick="minusSpeed()"><img src="minus.png"></button>
    <button type = "submit" onClick="plusSpeed()"><img src="plus.png"></button>
    The alerts come up fine, but the speed var never changes from 7.

    Any help at all is greatly appreciated! Thank you.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    type="submit" is for submitting forms. I assume you don't want that here. You can change the variable directly:

    Code:
    <button onClick="minusSpeed()"><img src="minus.png"></button>
    <button onClick="plusSpeed()"><img src="plus.png"></button>
    
    <script type="text/javascript">
    var speed=7;
    
    function minusSpeed(){
    	speed--;
    alert(speed);
    }
    function plusSpeed(){
    	speed++;
    alert(speed);
    }
    
    </script>
    or use one function and pass the change you want to make as an argument:

    Code:
    <button onClick="changeSpeed(-1)"><img src="minus.png"></button>
    <button onClick="changeSpeed(1)"><img src="plus.png"></button>
    
    <script type="text/javascript">
    var speed=7;
    
    function changeSpeed(inc){
    	speed=speed+inc;
    alert(speed);
    }
    
    </script>

  • Users who have thanked xelawho for this post:

    mortalpoet (03-29-2013)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    That's because you are using the POST-INCREMENT and POST-DECREMENT operators.

    And using them wrong.

    First of all, the fix to your code is dead simple:
    Code:
    function minusSpeed(){
        speed--;
        alert(speed);
    }
    function plusSpeed(){
        speed++;
        alert(speed);
    }
    Now. if you care, here's why your code was bogius:

    A POST-increment (or decrement) operator is one that returns the value of the variable AS IT WAS *before* the increment (or decrement) took place!

    In other words, when you do
    Code:
        var speed = 7;
        alert( speed++ ); // This will display 7 !!!!
        alert( speed ); // This will display 8 !!!!
    Your problem was the you *BOTH* used the post-increment *AND* you assigned that result back to the same variable. If you had done it in "steps" you would have maybe understood it:
    Code:
        var speed = 7;
        var newspeed = speed++;
        alert( newspeed ); // still 7 !!!
        alert( speed ); // now 8
        speed = newspeed;
        alert( speed ); // back to 7 !!!
    I really don't understand why JavaScript programmers (and PHP programmers, it seems) want to always use post-increment. It is much more natural to use PRE-increment. And it then means what you EXPECT it to:
    Code:
        var speed = 7;
        alert( ++speed ); // shows 8 
        alert( speed ); // still 8
    PRE-increment (and decrement) means "do the increment BEFORE you give back the value" and is much easier to use and understand in most circumstances. (It can also have a very minor performance advantage in some situations. Probably only one or two machine-level instructions, but even so...)
    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.

  • Users who have thanked Old Pedant for this post:

    mortalpoet (03-29-2013)

  • #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
    Whoops...good catch on the submit buttons, Xelawho. Though that didn't impact the fact that his alert()'s showed his bogus values.
    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.

  • Users who have thanked Old Pedant for this post:

    mortalpoet (03-29-2013)

  • #5
    New to the CF scene
    Join Date
    Mar 2013
    Location
    Portland, OR
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you xelawho, your code worked perfectly for me!
    And thank you Old Pendant! No one ever explained clearly how to use the ++ and -- modifiers, so they've always been elusive to me and never worked. Now I know why!

    Thank you both so much! Cheers!

    -Jesse


  •  

    Tags for this Thread

    Posting Permissions

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