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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Can buttons display variables?

    I'm trying to implement a counter using HTML and Javascript, but I'd like the look of it to be as simple as possible. Is there a way to have the button value display a variable? Here's the relevent HTML:

    Code:
    <div id="second">
    		<input type="button" class="btn" value=number />
    	</div>
    number is a variable in my javascript that I'd like to have displayed as the button text so that each time the button is pressed, the number variable is increased by 1 and the button reflects that.

    Here's the relevent javascript:

    Code:
    window.onload = function () {
    document.getElementById('Second').firstChild.onclick = number;}
     
    var number = 0;
    
    function increment(){
    	number++;
    	}
    Any help would be appreciated. I'm super new to this so please go easy on me.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    K.I.S.S.

    Code:
    <script type="text/javascript">
    function increment(btn)
    {
        var val = parseInt( btn.value ) + 1;
        btn.value = val;
        ... use val to do something, presumably, else what was the point ? ...
    }
    </script>
    
    ...
    
    <input type="button" value="0" onclick="increment(this);" />
    
    ...
    If you really don't intend to do anything with the value of the incrementor, then you could do it as simply as this:
    Code:
    <input type=button value="0" onclick="this.value = parseInt(this.value) + 1;" />
    But I would assume there is a purpose in this, so see first code.
    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:

    vince1981 (06-18-2010)

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The second, simpler option worked just fine. There are other things going on the page, but none of them need that value.

    Now since everything is done in that one button, how would you reset the button to 0?

    Another button would be great.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Assuming you have a <form>:

    Code:
    <form >
    ...
    <input type="button" name="bump" value="0" onclick="this.value = parseInt(this.value) + 1;" />
    <input type="button" value="Reset counter" onclick="this.form.bump.value=0;" />
    ...
    </form>
    My head hurts. If nothing *uses* the value of that button, what is its purpose? To make nervous users think the page is still working??
    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.

  • #5
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I guess I've been a little unclear about my purpose. I'm basically trying to put a stand-alone counter on the page. It doesn't need to do anything other than be a counter--it just needs to count up from zero when the main button is pushed and reset to zero when the other is pushed.

    That said, I tried your latest code but the reset button still doesn't work. Here's what I have now:

    Code:
    <form>
    <input type="button" value="0" onclick="this.value = parseInt(this.value) + 1;" class="mybutton" />
    <br><br>
    <input type="button" value="Reset" onclick="this.form.bump.value = 0;" class="smallbutton" />
    </form>
    I changed the type to reset, but that didn't work either, so I'm stumped again. I even removed the class and the line breaks between the two buttons just to make sure they weren't causing problems. Still nothing. As I said, I'm really new to this.

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Never mind. I solved the problem by giving the first button a name and using that in the onclick for the second button:

    Code:
    <form>
    <input type="button" name="counter" value="0" onclick="this.value = parseInt(this.value) + 1;" class="mybutton" />
    <br><br>
    <input type="reset" value="Reset" onclick="counter.value = 0;" class="smallbutton" />
    </form>
    Thanks so much for the help.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Quote Originally Posted by vince1981 View Post
    Never mind. I solved the problem by giving the first button a name and using that in the onclick for the second button:
    Which is *EXACTLY* what I did. I named my button "bump", as you can see if you look at the code.

    That's also why I insisted on having the <form>...</form> tags. Without them, you can 't use the "this.form.bump" construction.

    I'm a little surprised that simply using "counter.value" works for you. I'd guess you are using MSIE??
    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.

  • #8
    Owl
    Owl is offline
    New Coder
    Join Date
    Jun 2002
    Posts
    62
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    I'm a little surprised that simply using "counter.value" works for you. I'd guess you are using MSIE??
    Old Pedant, inline JS in any element of a form can reference
    any of its brothers directly by their name. That's JS, not MSIE

    Owl

  • Users who have thanked Owl for this post:

    Old Pedant (06-20-2010)

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Huh...and to think I've been coding it the long way for 13 years now. Ah, well...

    I guess I learned the "relative path via the form property of a field" as the efficient way to do things in a JS function and never imagined that it would make a difference where the JS code is executed.

    Well, I'm old, but not too old to learn new tricks. <grin style="sickly" />
    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
    •