By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,849 Members | 2,339 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,849 IT Pros & Developers. It's quick & easy.

firefox and problems with getElementById

P: n/a
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").s tyle.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>

Nov 30 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a


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

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

--

Martin Honnen
http://JavaScript.FAQTs.com/
Nov 30 '05 #2

P: n/a
Andrea wrote:
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").s tyle.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.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Nov 30 '05 #3

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

Nov 30 '05 #4

P: n/a
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
_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.

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


Nov 30 '05 #5

P: n/a
Andrea wrote:
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
Dec 1 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.