firefox and problems with getElementById

A

Andrea

I am trying to alter css using javascript as well as use the innerHTML
function. I have pasted below 3 forms that access getElementById in
slightly different ways (I wanted to rule out that it was the method.)
All 3 work fine on IE but only work momentarily on Firefox. For
example, one form has text that changes from red to black when the user
clicks the button. In IE it changes. In Firefox it changes for a
split second then goes back to black.

thanks for any ideas!
Andrea

<html>
<head>

<style type="text/css">
form {margin: 5px auto; padding: 5px; border: thin solid black;}
#change_color {color: black;}
#hidden {display: block;}
</style>

<script type="text/javascript" language="JavaScript">
function hide_div (id)
{
document.getElementById(id).style.display = "none";
}

function new_html (id)
{
document.getElementById("write_html").innerHTML = "This html is written
by you clicking the button.";
}
</script>

</head>

<body>

<form>
<span id="write_html"></span>
<button onclick="new_html();">Display html</button>
</form>

<form>
<span id="change_color">
This is black until user clicks the button.
</span>
<button
onclick='document.getElementById("change_color").style.color="red";'>Display
new color</button>
</form>

<form id="hidden">
The text in this form disappears when you click the button.
<button onclick="hide_div(this.form.id);">Hide this section</button>
</form>

</body>
</html>
 
M

Martin Honnen

Andrea wrote:

<form>
<span id="write_html"></span>
<button onclick="new_html();">Display html</button>

The problem is that button, according to the HTML 4 specification the
default for the button type is submit so with a conforming browser like
Mozilla the button executes the onclick handler and then submits the
form, with no action attribute set that means the page is reloaded.
<http://www.w3.org/TR/html4/interact/forms.html#h-17.5>
IE has its own rules about the default and makes it a simple click
button so in your example only the script is executed:
<http://msdn.microsoft.com/library/d...hop/author/dhtml/reference/objects/button.asp>
<http://msdn.microsoft.com/library/d.../author/dhtml/reference/properties/type_3.asp>

Use
<button type="button"
or even
<input type="button"
to get the same behavior in browsers.
 
D

David Dorward

Andrea said:
I am trying to alter css using javascript as well as use the innerHTML
function. I have pasted below 3 forms that access getElementById in
slightly different ways (I wanted to rule out that it was the method.)
All 3 work fine on IE but only work momentarily on Firefox. For
example, one form has text that changes from red to black when the user
clicks the button. In IE it changes. In Firefox it changes for a
split second then goes back to black.
<form>
<span id="change_color">
This is black until user clicks the button.
</span>
<button
onclick='document.getElementById("change_color").style.color="red";'>Display

Internet Explorer has a bug. If you don't specify a type attribute for
button elements, then they default to type "submit". IE doesn't respect
this.

What is happening, is that Firefox is running the JavaScript, and then
submitting the form. Since you haven't specified an action (which is
_required_), Firefox performs error recovery and assumes you intended to
submit to the same URL. So you end up on the same page, but the state of
any JavaScript is reset.
 
A

Andrea

Thanks, Martin. Both of those fixed the problem. Is one preferable?
e.g. <button type="button"> versus <input type="button">?
 
A

Andrea

Thanks - this is helpful and explains why it was working momentarily
then going back.
 
T

Thomas 'PointedEars' Lahn

Andrea said:
Thanks, Martin. Both of those fixed the problem. Is one preferable?
e.g. <button type="button"> versus <input type="button">?

Depends. The `button' element is not supported by NN4 and UAs not
supporting HTML 4, but it can contain other elements while the
input[type="button"] element cannot. Generally input[type="button"]
is more compatible but less flexible. This is a question better be
asked in news:comp.infosystems.www.authoring.html.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top