J
joe
Here is simple code to illustrate a problem I am having.
The html creates a simple one-cell table. The text has yellow bk and when mouse
is over it (hovering) bk turns gray.
Then I click "Change" which runs changetext() function. Text changes but the
hovering bk change feature is no longer there.
If I remove the line labeled as "the problem line" it works as expected.
What gives?
<html><head>
<style type="text/css">
td.muu { background: #F1F10D; }
td.muu a {background: ##80FF80;}
td.muu a:hover {background: #C0C0C0; }
</style>
<script type="text/javascript">
function changetext()
{
document.getElementById("test1").style.backgroundColor="#40FF40"; //the problem
line
document.getElementById("test1").innerHTML="Bk should be green, when hover is
should be gray as before";
}
function crtable()
{
document.write('<table><tr>');
document.write('<td class="muu"><a id="test1" href="#"
onclick="javascript:changetxt()">Bk is yellow, hover its gray</a></td>');
document.write('</tr></table>');
}
</script>
</head><body>
<script type="text/javascript">
crtable();
</script>
<br>
<button onclick="changetext();">Change</button>
</body></html>
The html creates a simple one-cell table. The text has yellow bk and when mouse
is over it (hovering) bk turns gray.
Then I click "Change" which runs changetext() function. Text changes but the
hovering bk change feature is no longer there.
If I remove the line labeled as "the problem line" it works as expected.
What gives?
<html><head>
<style type="text/css">
td.muu { background: #F1F10D; }
td.muu a {background: ##80FF80;}
td.muu a:hover {background: #C0C0C0; }
</style>
<script type="text/javascript">
function changetext()
{
document.getElementById("test1").style.backgroundColor="#40FF40"; //the problem
line
document.getElementById("test1").innerHTML="Bk should be green, when hover is
should be gray as before";
}
function crtable()
{
document.write('<table><tr>');
document.write('<td class="muu"><a id="test1" href="#"
onclick="javascript:changetxt()">Bk is yellow, hover its gray</a></td>');
document.write('</tr></table>');
}
</script>
</head><body>
<script type="text/javascript">
crtable();
</script>
<br>
<button onclick="changetext();">Change</button>
</body></html>