innerHTML sometimes reverts to previous value after function return

[Warren Sarle]

The page http://warrensarle.com/temp.html has three lines of text.

The top one is a p element saying "Not in a form",
which is not in a form.

The middle one is a button element saying "Button in a form",
which is in a form.

The bottom one is a div element saying "Original text".

Both the p element and the button element are given the same
function as an onclick handler. This function assigns a string,
"Testing innerHTML", to the innerHTML property of the div element,
and then calls alert to say it is done.

When the button is clicked, the text in the div changes to
"Testing innerHTML" as expected. But after dismissing the
alert box, the text in the div reverts to "Original text"
when using Firefox or Opera. The text does not revert when
using IE.

Nor does the text revert when the p element is clicked in any
of these browsers, unless you subsequently click the button,
which causes "Testing innerHTML" to revert to "Original text"
when using Firefox or Opera.

Could someone please explain why the text reverts in some
situations but not others?

 

[web.dev]

The page http://warrensarle.com/temp.html has three lines of text.

The top one is a p element saying "Not in a form",
which is not in a form.

The middle one is a button element saying "Button in a form",
which is in a form.

The bottom one is a div element saying "Original text".

Both the p element and the button element are given the same
function as an onclick handler. This function assigns a string,
"Testing innerHTML", to the innerHTML property of the div element,
and then calls alert to say it is done.

When the button is clicked, the text in the div changes to
"Testing innerHTML" as expected. But after dismissing the
alert box, the text in the div reverts to "Original text"
when using Firefox or Opera. The text does not revert when
using IE.

Nor does the text revert when the p element is clicked in any
of these browsers, unless you subsequently click the button,
which causes "Testing innerHTML" to revert to "Original text"
when using Firefox or Opera.

Could someone please explain why the text reverts in some
situations but not others?

If you check W3C, http://www.w3.org/TR/html4/interact/forms.html#h-17.5
, by default, a button element by default is a submit. It appears FF
and Opera honor this while IE does not. Some solutions:

1. explicitly give the button a type
2. handle the onsubmit event on the form so it does not submit the
form.