How to make permanent changes using Javascript in Firefox

Dev Shed Forums Sponsor:

December 2nd, 2012, 11:04 AM

mahesh_chavan

Registered User

Join Date: Dec 2012

Posts: 2

Time spent in forums: 13 m 13 sec
Reputation Power: 0

How to make permanent changes using Javascript in Firefox

I am using javascript to change font/size and text ( innerhtml)
The changes made by javascript remain permanent in Internet Explorer, where as in Firefox ( I have tried ver. 7 to 16.0.2 ) changes are only momentary. If alert is used in the function, then the changes remain effective only till alert window is there.
The html is:

Code:

<HTML>
<BODY BGCOLOR#FFFF00>
<HEAD><TITLE>Showing Charset</TITLE>
<STYLE type="text/css">
.head_class {color:red;font-size:60;font-family:impact;}
</STYLE>
<script type="text/JavaScript">
function chngFont()
{
var el2 = document.getElementById('myfont');
var sfont = el2.value;
document.getElementById('head').className = 'head_class';
document.getElementById('head').innerHTML = sfont;
alert(document.seefont.fonttosee.value);
}

</script>
</head>
<body bgcolor=#ffff00>
<h1 align=center id="head">Charset</h1>
<form name=seefont >
<input type="text" id="myfont" name="fonttosee" size=20 value="arial">
<button onclick="chngFont()">Change font</button>
</form>
</BODY></HTML>

When I click the button class head_class is applied to heading id "head" and even the text is change to font name entered but just momentarily. If I use alert in the function, the changes remain only till alert is on the screen.
The same code works in IE forever ( The changes remain permanent.
What are the settings in firefox to make the changes using javascript permanent ?

Last edited by Kravvitz : December 3rd, 2012 at 06:55 PM. Reason: fixed the code tags

December 3rd, 2012, 06:40 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 601

Time spent in forums: 1 Week 1 Day 13 h 25 m 38 sec
Reputation Power: 69

Code:

HTML

<form name=seefont onsubmit="return false">

FireFox is assuming the button tag, in your form, is a submit button. At least; that's what I think it's doing. So you need to prevent a form submission, when the button is clicked.

Comments on this post

Kravvitz agrees!

December 3rd, 2012, 06:59 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,831

Time spent in forums: 6 Months 1 Day 19 h 19 m 2 sec
Reputation Power: 4192

web_loone08 is correct.

To add to what web_loone08 said, this is a known bug in IE's "backwards compatibility mode" (aka "quirks mode"). The default type of the <button> element is "submit", not "button". The first thing to do is to add a doctype before the <html> start tag to tell IE to use "standards mode".

Code:

<!DOCTYPE html>
<HTML>
<HEAD>

Then an alternative to the solution web_loone08 suggested would be to add the type attribute to the <button>:

Code:

<button type="button" onclick="chngFont()">Change font</button>

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

Last edited by Kravvitz : December 3rd, 2012 at 07:06 PM.

December 3rd, 2012, 07:06 PM

BarryG

Contributing User

Join Date: Aug 2011

Location: Sydney Australia

Posts: 131

Time spent in forums: 3 Days 7 h 51 m 28 sec
Reputation Power: 83

Quote:

Originally Posted by mahesh_chavan

You've got lots of html errors in there, like 2 <body> tags for a start, and unquoted attribute values.
But you form is being submitted, and the new page loads the original values.

So this code stops the "submit" from happening, but you are specifying the font in the .head_class style, so no matter what font name you type, you get "impact".

Code:

<HTML>
<HEAD><TITLE>Showing Charset</TITLE>
<STYLE type="text/css">
.head_class {
	color:red;
	font-size:60;
	font-family:impact; 
	}
</STYLE>
<script type="text/JavaScript">
function chngFont()
{
var el2 = document.getElementById('myfont');
var sfont = el2.value;
document.getElementById('head').className = 'head_class';
document.getElementById('head').innerHTML = sfont;
alert(document.seefont.fonttosee.value);
}

</script>
</head>
<body bgcolor="#ffff00">
<h1 align="center" id="head">Charset</h1>
<form name="seefont" action="#" onsubmit="return false">
<input type="text" id="myfont" name="fonttosee" size="20" value="arial">
<button onclick="chngFont()">Change font</button>
</form>
</BODY></HTML>

If you actually want to change the text to the font family you enter, insert this line right above your alert

Code:

document.getElementById('head').style.fontFamily = sfont;

That will over-ride the head_class font.

Last edited by BarryG : December 3rd, 2012 at 10:21 PM.

December 4th, 2012, 05:44 AM

mahesh_chavan

Registered User

Join Date: Dec 2012

Posts: 2

Time spent in forums: 13 m 13 sec
Reputation Power: 0

Yes, answer is correct

Thank you so much all who have helped.
Return false works great !

How to make permanent changes using Javascript in Firefox

Developer Shed Advertisers and Affiliates