Content changes dynamically using javascript but effects does not remain permanant
When I use javascript to change font/color/size or inner html, it works temporarily only. Changes does not remain permanent. e.g.
<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); } </p><p></script>
Charset
<form name="seefont"> <input type="text" id="myfont" name="fonttosee" size="20" value="arial"> <button onclick="chngFont()">Change font</button> </form>
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 ?
Modified by mahesh_chavan
Chosen solution
Your <button> might be submitting the form and causing the page to refresh. Try this to prevent form submission:
<button onclick="chngFont(); return false;">Read this answer in context 👍 1
All Replies (2)
Chosen Solution
Your <button> might be submitting the form and causing the page to refresh. Try this to prevent form submission:
<button onclick="chngFont(); return false;">
Thank you so much jscher2000 ! Firefox reloads the page automatically and that was the problem. Now the changes remains permanent
Modified by mahesh_chavan