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 to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    innerHTML basic question

    Hi, I have the following problem. I have a text box, I want to be able to press a button to increment the contents and then update the text box.

    I have the following code.

    HTML
    [CODE]
    <fieldset>
    <legend>Details</legend>

    <input id="textBox" type="text" value="0">

    <input id = "test" type = "submit" value = "+"/>

    </fieldset>

    [CODE]

    JS
    [CODE]

    window.onload = function (){

    test.onclick = function(){

    var x = document.getElementById("textBox").value;

    x++;

    document.getElementById("textBox").innerHTML = x;

    //alert(x);
    };

    };
    [CODE]

    Quite basic, but I'm not getting it to work. Any advice would be much appreciated.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    Your basic problem is that you are using a SUBMIT button!

    Because you are not suppressing the natural action of the submit button, after you do the increment, the submit button continues on to do its natural action...which is to SUBMIT THE <FORM>! Which means that the browser sends the form information *BACK* to the server and the server RESENDS the page back to the browser. And you have accomplished nothing.

    So to start with, change from type="submit" to simply type="button"

    Then you have two mistakes in the JS code:
    Code:
    test.onclick = function()
    {
        var x = Number(document.getElementById("textBox").value); // ensure you get a number!
        x++;
        // put updated number *BACK* in the value!
        // text fields do NOT HAVE any innerHTML property!
        document.getElementById("textBox").value = x;
    }
    Last edited by Old Pedant; 01-15-2013 at 10:01 PM.
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    By the by, for maximum compatibility with all browsers, change
    Code:
    test.onclick = function()
    to
    Code:
    document.getElementById("text").onclick = function()
    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.

  • #4
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much.

    LF.


  •  

    Posting Permissions

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