Log in

View Full Version : document.getElementById problem


yoyoyo
12-22-2008, 09:48 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

/*Display info*/
#tt {z-index:200;position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat}
#ttcont {z-index:200;display:block; padding:2px 12px 3px 7px; width:50px;height:50px;text-align:center;margin-left:5px; background:#000; color:#FFF}
/*Display info*/


body,div{
overflow: hidden;;cursor:default;
font:8pt Tahoma;color:#000;
}

</style>

<script type="text/javascript">

function combination(){
document.write("<span onmouseover=\"tooltip.show('<span id=plastic2>None</span>');\" onmouseout=\"tooltip.hide();\" id=\"plastic1\">See number</span>");
}

function change(num){
var numbers=["One","Two","Three"];
for (var a=0; a<numbers.length; a++)
if (num==a){
document.getElementById('plastic1').innerHTML=numbers[a]
document.getElementById('plastic2').innerHTML=numbers[a]}
}

function checkhowmanyspan()
{
var x=document.getElementsByTagName("span");
alert(x.length);
}
</script>

</head>

<body>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><center>
<script type="text/javascript">combination();</script><br /><br /><br />
Change:<br />
<a href="#" onclick="change(0)">One</a> <br />
<a href="#" onclick="change(1)">Two</a> <br />
<a href="#" onclick="change(2)">Three</a> <br /> <br />
<script type="text/javascript" src="http://sandbox.leigeber.com/tooltip/script.js"></script>
<input type="button" onclick="checkhowmanyspan()" value="How many span elements?" />
</body>
</html>


I have checked it has two span elements and I want to change the content in both span. But the problem is it can change the one in the page but not the other fade one. What I guess is it is inside a function and I am not sure how to do it. Can anyone help me out?
magicyte
12-22-2008, 09:59 PM
It is possibly because the 2nd span is not valid XHTML. Your DOCTYPE is XHTML Transitional, but when you declare the 2nd span, the id should be id="plastic2", not id=plastic2. Also, in your <style> tag, there is an extra semicolon.
yoyoyo
12-22-2008, 10:15 PM
Thanks for helping. But it looks like there is no other way to put id="XX" inside the second span since there are too many quotes and it can cause an error. I did try to change the DOM getelement to this


document.getElementsByTagName("span")[0].innerHTML=numbers[a]
document.getElementsByTagName("span")[1].innerHTML=numbers[a]

It still doesn't work, but I believe and am sure it is because the 2nd span is inside the tooltip.show() function call, which causes I can not change its content remotely.
jscheuer1
12-23-2008, 04:23 AM
There is no span with the id plastic2, and no document.getElementsByTagName("span")[1], at least not at first. If it exists at all, it is created by the tooltip script, after the number has been changed, too late to reflect that.

This appears to work though:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

/*Display info*/
#tt {z-index:200;position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat}
#ttcont {z-index:200;display:block; padding:2px 12px 3px 7px; width:50px;height:50px;text-align:center;margin-left:5px; background:#000; color:#FFF}
/*Display info*/


body,div{
overflow: hidden;;cursor:default;
font:8pt Tahoma;color:#000;
}

</style>

<script type="text/javascript">

function combination(){
document.write("<span onmouseover=\"tooltip.show('<span>' + change.thenum + '</span>');\" onmouseout=\"tooltip.hide();\" id=\"plastic1\">See number</span>");
}

function change(num){
var numbers=["One","Two","Three"];
for (var a=0; a<numbers.length; a++)
if (num==a)
change.thenum=document.getElementById('plastic1').innerHTML=numbers[a];
}
change.thenum='None';
function checkhowmanyspan()
{
var x=document.getElementsByTagName("span");
alert(x.length);
}
</script>

</head>

<body>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><center>
<script type="text/javascript">combination();</script><br /><br /><br />
Change:<br />
<a href="#" onclick="change(0)">One</a> <br />
<a href="#" onclick="change(1)">Two</a> <br />
<a href="#" onclick="change(2)">Three</a> <br /> <br />
<script type="text/javascript" src="http://sandbox.leigeber.com/tooltip/script.js"></script>
<input type="button" onclick="checkhowmanyspan()" value="How many span elements?" />
</body>
</html>

Note: This is just a quickie fix. I'm not bothering with other possible errors, sloppiness, and/or invalid code.
yoyoyo
12-23-2008, 06:34 AM
Note: This is just a quickie fix. I'm not bothering with other possible errors, sloppiness, and/or invalid code.

That's just magic:eek::eek:
I thought if I did that the content of the tool tip will be ' + change.thenum + '
Sometimes I just don't get what the different between single quote '..' and double one ".." after this case.

Thanks a lot for helping:p..IE7 and FF3 work for this case :D
jscheuer1
12-23-2008, 07:00 AM
Sometimes I just don't get what the different between single quote '..' and double one ".."

Don't feel too bad, I got it wrong at first trying to get this code to work. It can get confusing because the meaning is often dependant upon the context. The single and the double quote are equivalent. But when they become nested, it depends upon which is nested within which and to what purpose, as to whether or not they need escaping and/or can signify a shift from the literal to the variable value of what they contain. Even more confusing because some that don't need escaping, can be without messing anything up, while others cannot. For this very reason, and others, it's generally better not to assign events by using the document.write() method.