Results 1 to 6 of 6

Thread: document.getElementById problem

  1. #1
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile document.getElementById problem

    HTML Code:
    <!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?

  2. #2
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    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.

  3. #3
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Note: This is just a quickie fix. I'm not bothering with other possible errors, sloppiness, and/or invalid code.
    That's just magic
    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..IE7 and FF3 work for this case

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by yoyoyo View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •