#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    2
    Rep 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
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,136
    Rep Power
    120
    [code=HTML]<form name=seefont onsubmit="return false">[/code]

    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
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    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>
    Last edited by Kravvitz; December 3rd, 2012 at 07:06 PM.
    Spreading knowledge, one newbie at a time.

    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).
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    Sydney Australia
    Posts
    183
    Rep Power
    83
    Originally Posted by mahesh_chavan
    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.
    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.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    2
    Rep Power
    0

    Yes, answer is correct


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

IMN logo majestic logo threadwatch logo seochat tools logo