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
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Button Problem using OnClick

    Hi, from my code below, im trying to have 2 (and more in the future) buttons. When you click on a button the value should increment by 1.

    I think my code seems correct but it obviously isnt as it doesnt work.

    Can anyone point out where ive gone wrong please?

    Thanks!

    Code:
    <head>
    <script language="javascript">
    
    function change(val)
    {
    
    $i = document.Selector.val.value;
    $i++
    
    document.Selector.val.value = $i;
    
    }
    
    </script>
    </head>
    
    <body>
    <form action="" name="Selector">
    <input type="button" name="button1" value="0" onclick="change(button1);"><br>
    <input type="button" name="button2" value="0" onclick="change(button2);"><br>
    </form>
    </body>
    </html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Try this ...
    Code:
    <html>
    <head>
    <script type="text/javascript" language="javascript">
    
    function change(val) {
      var $i = document.getElementById(val).value;
      $i++
      document.getElementById(val).value = $i;
    }
    </script>
    </head>
    
    <body>
    <form action="" name="Selector" onsubmit="return false">
    <input type="button" name="button1" id="button1" value="0" onclick="change(this.id)">
    <input type="button" name="button2" id="button2" value="0" onclick="change(this.id)">
    <input type="button" name="button3" id="button3" value="0" onclick="change(this.id)">
    <input type="button" name="button4" id="button4" value="0" onclick="change(this.id)">
    <input type="button" name="button5" id="button5" value="0" onclick="change(this.id)">
    <input type="button" name="button6" id="button6" value="0" onclick="change(this.id)">
    <input type="button" name="button7" id="button7" value="0" onclick="change(this.id)">
    <input type="button" name="button8" id="button8" value="0" onclick="change(this.id)">
    </form>
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    vorl (03-20-2009)

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thanks jmrker! Works perfectly as needed!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,447
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Sorry, but I just couldn't stand it.

    WHY would you make it that complex???
    Code:
    <style>
    input { width: 40px; color: red; background-color: yellow; border: solid 2px red; margin: 12px; }
    </style>
    <form action="" name="Selector" onsubmit="return false">
    <input type=button name="B1" value="0" onclick="this.value=1+parseInt(this.value);">
    <input type=button name="B2" value="0" onclick="this.value=1+parseInt(this.value);">
    <input type=button name="B3" value="0" onclick="this.value=1+parseInt(this.value);">
    <input type=button name="B4" value="0" onclick="this.value=1+parseInt(this.value);">
    <input type=button name="B5" value="0" onclick="this.value=1+parseInt(this.value);">
    <input type=button name="B6" value="0" onclick="this.value=1+parseInt(this.value);">
    <input type=button name="B7" value="0" onclick="this.value=1+parseInt(this.value);">
    <input type=button name="B8" value="0" onclick="this.value=1+parseInt(this.value);">
    <input type=button name="B9" value="0" onclick="this.value=1+parseInt(this.value);">
    </form>
    Most especially, why would you pass this.id to the function, just so that it can use getElementById to, effectively, convert the id *back* into the same pointer/reference that you already had with this??

    It's my contention that 90% of the time, when you see an ID applied to a form field, that there is some inefficient code in the offing. There are *occasional* reason for ID on a <form>'s field, but maybe occasional is stretching it.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation Careful, opinion coming on line ...

    Quote Originally Posted by Old Pedant View Post
    Sorry, but I just couldn't stand it.

    WHY would you make it that complex???

    Most especially, why would you pass this.id to the function, just so that it can use getElementById to, effectively, convert the id *back* into the same pointer/reference that you already had with this??

    It's my contention that 90% of the time, when you see an ID applied to a form field, that there is some inefficient code in the offing. There are *occasional* reason for ID on a <form>'s field, but maybe occasional is stretching it.
    Whenever possible, I try to use as much of the requestor's original code as possible because if they put the thought into it to begin with then it should be easier for them to understand.

    I like to see the comments of other forum members when the original script can be condensed so that the other members can see the intent and then the improvements.

    I have noticed a lot of postings when 'this' has to be explained over and over again, so the post was placed to introduce the concept again to the newer coders.

    I appreciate the fact that you can jump to a more cleaver solution in one step, but since there are a lot of new readers (who don't seem to know how to use the "search" function to read old postings)
    I'll still try to give solutions with there old scripts unless there is a better way to accomplish the task with smaller, more simplified code.

    BTW, personally, I like the change you made, but I'll leave it to the originator to choose which version they wish to implement based upon their own knowledge level.


    Might even condense it further like this:
    Code:
    <html>
    <head>
    <script type="text/javascript" language="javascript">
    // From: http://codingforums.com/showthread.php?p=795845#post795845
    
    </script>
    </head>
    
    <body>
    <form action="" name="Selector" onsubmit="return false">
    <input type="button" name="b1" value="0" onclick="this.value++">
    <input type="button" name="b2" value="0" onclick="this.value++">
    <input type="button" name="b3" value="0" onclick="this.value++">
    <input type="button" name="b4" value="0" onclick="this.value++">
    <input type="button" name="b5" value="0" onclick="this.value++">
    <input type="button" name="b6" value="0" onclick="this.value++">
    <input type="button" name="b7" value="0" onclick="this.value++">
    <input type="button" name="b8" value="0" onclick="this.value++">
    </form>
    </body>
    </html>
    Last edited by jmrker; 03-20-2009 at 03:13 PM. Reason: Example addition ...


  •  

    Posting Permissions

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