InnerHTML does not return Onmouseover

scowat · Oct 26, 2007

I am dynamically updating the contents of cells to achieve a scrolling
effect, like this:

<html>
<body>
<script lang=javascript>
function scroll(){
var firstrowcell1 = document.getElementById('1-1').innerHTML;
var firstrowcell2 = document.getElementById('1-2').innerHTML;
for (var x = 1; x < 3; x ++)
{
document.getElementById(x+'-1').innerHTML = document.getElementById((x
+1)+'-1').innerHTML;
document.getElementById(x+'-2').innerHTML = document.getElementById((x
+1)+'-2').innerHTML;
}
document.getElementById(x+'-1').innerHTML = firstrowcell1;
document.getElementById(x+'-2').innerHTML = firstrowcell2;
}
function scrollcont(){
setInterval('scroll()',1000);
}
function showinnerhtml(){
alert(document.getElementById("1-2").innerHTML);
}
</script>
<table>
<tr>
<td id='1-1'>Line 1</td>
<td id='1-2'><img src='numbers/1.gif' onmouseover="return escape('This
is line 1')"></td>
</tr>
<tr>
<td id='2-1'>Line 2</td>
<td id='2-2'><img src='numbers/2.gif' onmouseover="return escape('This
is line 2')"></td>
</tr>
<tr>
<td id='3-1'>Line 3</td>
<td id='3-2'><img src='numbers/3.gif' onmouseover="return escape('This
is line 3')"></td>
</tr>
</table>
<button onclick=scroll()>Scroll 1 line</button><br>
<button onclick=scrollcont()>Scroll continuously</button><br>
<button onclick=showinnerhtml()>Show innerHTML</button>
<script language="JavaScript" type="text/javascript" src="scripts/
wz_tooltip.js"></script>
</body>
</html>

I am also using Walter Zorn's tooltip script. When I first load the
page, the tooltips on the images work fine when onmouseover fires.
However, after a single scroll, tooltips fail to appear. I have
discovered that this is because the innerHTML that is being copied
from one cell to the the other doesn't contain onmouseover
information.

By clicking on the button marked 'Show innerHTML' I can see that the
innerHTML attribute doesn't return the onmouseover information
contained in the tag.

Can anyone shed some light on this? Any replies would be greatly
appreciated - thanks!

David Mark · Oct 26, 2007

I am dynamically updating the contents of cells to achieve a scrolling
effect, like this:

Why not just make the table body scroll?

<html>
<body>
<script lang=javascript>

Use type="text/javascript", not a made-up attribute.

function scroll(){
var firstrowcell1 = document.getElementById('1-1').innerHTML;
var firstrowcell2 = document.getElementById('1-2').innerHTML;
for (var x = 1; x < 3; x ++)
{
document.getElementById(x+'-1').innerHTML = document.getElementById((x
+1)+'-1').innerHTML;
document.getElementById(x+'-2').innerHTML = document.getElementById((x
+1)+'-2').innerHTML;
}
document.getElementById(x+'-1').innerHTML = firstrowcell1;
document.getElementById(x+'-2').innerHTML = firstrowcell2;}

function scrollcont(){
setInterval('scroll()',1000);}

function showinnerhtml(){
alert(document.getElementById("1-2").innerHTML);}

</script>
<table>
<tr>
<td id='1-1'>Line 1</td>
<td id='1-2'><img src='numbers/1.gif' onmouseover="return escape('This
is line 1')"></td>

What is that onmouseover handler supposed to be doing?

</tr>
<tr>
<td id='2-1'>Line 2</td>
<td id='2-2'><img src='numbers/2.gif' onmouseover="return escape('This
is line 2')"></td>
</tr>
<tr>
<td id='3-1'>Line 3</td>
<td id='3-2'><img src='numbers/3.gif' onmouseover="return escape('This
is line 3')"></td>
</tr>
</table>
<button onclick=scroll()>Scroll 1 line</button><br>
<button onclick=scrollcont()>Scroll continuously</button><br>
<button onclick=showinnerhtml()>Show innerHTML</button>
<script language="JavaScript" type="text/javascript" src="scripts/
wz_tooltip.js"></script>

Lose the language attribute. It isn't needed.

</body>
</html>

I am also using Walter Zorn's tooltip script. When I first load the

That would explain the wacky onmouseover handlers (sort of.) The
question I have to ask is why the script doesn't look at the title
attribute? That is where extra information about the link is supposed
to go. Embedding it in a mouseover event handler renders it invisible
to search engines, screen readers, etc. If that is a requirement of
the script, then you should stop using it.

page, the tooltips on the images work fine when onmouseover fires.
However, after a single scroll, tooltips fail to appear. I have
discovered that this is because the innerHTML that is being copied
from one cell to the the other doesn't contain onmouseover
information.

By clicking on the button marked 'Show innerHTML' I can see that the
innerHTML attribute doesn't return the onmouseover information
contained in the tag.

Can anyone shed some light on this? Any replies would be greatly
appreciated - thanks!

I see no reason why the onmouseover attribute wouldn't appear.

David Mark · Oct 26, 2007

Hello, and thanks for your replies. I apprecate the tips that you provided
but am still left wondering what's going on.

I am not sure what you mean by making the table body scroll. One of the
requirements of my project was to hide the scroll bar (overflow: hidden) so
the user actually has no way of scrolling the table. They wanted it to

Just because you can't see the scrollbars doesn't mean you can't
scroll the content. Use the scrollLeft and scrollTop properties of
the table element.

scroll automatically, and this is the best I could come up with. Any
alternative ideas are welcome.

The onmouseover is designed to display a tooltip. But the problem really
lies with the way that document.GetElementById('1-2').innerHTML reports the
img tag - the onmouseover code is stripped out.

I have further narrowed it down to the Walter Zorn script. I have two files:http://www.scottwatkins.com/scott/test1.htm- No Walter Zorn script,
correctly reports innerHTML with onmouseover attributehttp://www.scottwatkins.com/scott/test2.htm- Walter Zorn script added, does
not correctly report innerHTML

Bad script.

But for the life of me, I can't figure out why a script would do this, can
you? Anyone?

I can't imagine. You might ask Walter Zorn.

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Angularjs newbie - second JSON datasource does not display	0	May 18, 2022
Only one table shows up with the information	2	Mar 29, 2023
How do I output this recursive function correctly to a web browser?	2	Dec 17, 2022
Sort by number of characters	1	Nov 2, 2023
Help :(	3	Aug 17, 2021
Javascript DOM	1	Mar 29, 2023

InnerHTML does not return Onmouseover

scowat

David Mark

David Mark

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads