473,888 Members | 1,599 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

firefox and problems with getElementById

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="JavaS cript">
function hide_div (id)
{
document.getEle mentById(id).st yle.display = "none";
}

function new_html (id)
{
document.getEle mentById("write _html").innerHT ML = "This html is written
by you clicking the button.";
}
</script>

</head>

<body>

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

<form>
<span id="change_colo r">
This is black until user clicks the button.
</span>
<button
onclick='docume nt.getElementBy Id("change_colo r").style.color ="red";'>Displa y
new color</button>
</form>

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

</body>
</html>

Nov 30 '05 #1
5 4346


Andrea wrote:

<form>
<span id="write_html" ></span>
<button onclick="new_ht ml();">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
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_colo r">
This is black until user clicks the button.
</span>
<button

onclick='docume nt.getElementBy Id("change_colo r").style.color ="red";'>Displa y

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

Nov 30 '05 #4
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
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.infos ystems.www.authoring.html.
PointedEars
Dec 1 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
4845
by: Philip | last post by:
I have just tried my website with Firefox v1.0 and when I try to load a movie using: document.getElementByID('MovieID').LoadMovie(0, 'MovieURL'); the browser tells me that LoadMovie is not a recognized function. This works fine on IE6. I need to change the movie depending on the buttons that the user presses, all on the same page. Is the only way to do this by changing the innerHTML of the 'MovieID'
9
7794
by: Christian Hubinger | last post by:
Hi! I've implemented some DropDown list in ASP.NET that use Ajax to fetch the data from the server. The javascript is written to call cascading to the bottom most dropdown in order to update them all if a top one changed. The strange thing is that the script runs without problems on IE but in FireFox i get a "too much recursion" error and nothing happens. Here is the javascript code generated:
6
3040
by: Sjaakie | last post by:
Hi there, I'm trying to get this working with Firefox. Can you point out what's wrong? No problems with IE, Firefox doens't fill selMonth... TIA >>> the script... >>> <select name="selDay" id="selDay" style="width:50;" ></select> - <select name="selMonth" id="selMonth" style="width:50;"></select> -
3
2962
by: niconedz | last post by:
Hi The following code works fine in IE but not Firefox. It's a little script that zooms an image and resizes the window to fit. Can anybody tell me what's wrong? Thanks Nico == btw.. sorry for the long post ==
12
2095
by: shafiqrao | last post by:
Hello everyone, I have a script that runs in IE great, but in firefox it has problems. I understand that there are some objects that are accessed differently in IE and Mozilla. Can anybody let me know what I need to change in the file to make a copy that would run fine on Firefox? Here is the link to the file: http://people.emich.edu/srehman2/study/polls.html click on the 'Build Bars' link displayed at the top-right corner. I am...
4
5137
by: tcole6 | last post by:
My problem appears to be Firefox specific. I have a hyperlink that loads a new window. This window contains hyperlinks that call javascript functions in the parent window and then closes the child window. The function that is called contains an XMLHttpRequest. My problem is that everything happens as it should, the innerHTML is changed by the results of the XMLHttpRequest and the child window closes. The problem is this, in Firefox,...
2
17087
by: cbjewelz | last post by:
Hey all. So I'm having problems with cross browser alignments. I'm looking at Safari and Mozilla Firefox. I develop in Safari and so it looks perfect there however in Firefox my vertical alignments and div widths are off. It's as if firefox has a different definition of a pixel than safari. Here is the url: http://theprize.chemouni.com/testing.php. When you select the Option from the pull down, the first part of the form appears. Then when...
1
3555
by: SunshineInTheRain | last post by:
My project has 3 files, File1 has included master page. file1 consists of iframe1 that load file2. File2 consists of iframe2 that load file3. Javascript used on each file to resize the iframe height based on the each iframe's content height. It is work well on IE, but the error "has no properties" occured with firefox on code as below. Where both code is to get the id of iframe on file1....
0
9800
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10777
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10438
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9597
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7990
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5817
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
6014
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4642
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
3251
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.