InnerHTML does not return Onmouseover

S

scowat

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!
 
D

David Mark

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

Why not just make the table body scroll?
<html>
<body>
<script lang=javascript>
Click to expand...

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>
Click to expand...

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>
Click to expand...

Lose the language attribute. It isn't needed.
</body>
</html>

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

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!
Click to expand...

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

David Mark

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
Click to expand...

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
Click to expand...

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

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

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
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Angularjs newbie - second JSON datasource does not display 0
Only one table shows up with the information 2
How do I output this recursive function correctly to a web browser? 2
Sort by number of characters 1
Help :( 3
Javascript DOM 1

Members online

No members online now.
Total: 24 (members: 0, guests: 24)
Robots: 438

Forum statistics

Threads
473,770
Messages
2,569,583
Members
45,074
Latest member
StanleyFra

Latest Threads

Top