A
Andrea
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").style.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>
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").style.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>