innerHTML basic question

[LionFische]

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.

[Old Pedant]

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:

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;
}

[Old Pedant]

By the by, for maximum compatibility with all browsers, change

test.onclick = function()

to

document.getElementById("text").onclick = function()

[LionFische]

Thank you so much.

LF.