firefox and problems with getElementById

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Andrea - 30 Nov 2005 18:50 GMT

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>

Reply to this Message

Martin Honnen - 30 Nov 2005 19:00 GMT

> <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/default.asp?url=/workshop/author/dhtml/referen
ce/objects/button.asp>
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/referen
ce/properties/type_3.asp>

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

Signature

Martin Honnen
http://JavaScript.FAQTs.com/

Reply to this Message

Andrea - 30 Nov 2005 22:58 GMT

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

Reply to this Message

Thomas 'PointedEars' Lahn - 30 Nov 2005 23:56 GMT

> 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

Reply to this Message

David Dorward - 30 Nov 2005 19:03 GMT

> 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
[quoted text clipped - 3 lines]
> 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.

Signature

David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Reply to this Message

Andrea - 30 Nov 2005 23:01 GMT

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

> What is happening, is that Firefox is running the JavaScript, and then
> submitting the form. Since you haven't specified an action (which is
[quoted text clipped - 5 lines]
> David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
> Home is where the ~/.bashrc is

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / November 2005

firefox and problems with getElementById