Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2010
    Location
    Toronto
    Posts
    95
    Thanks
    52
    Thanked 0 Times in 0 Posts

    Question My code is not working. Please help

    I wrote a script that should loop through the list of countries, and if the entry's width exceeds 70px, it should cut the extra letters and insert "..." at the end of the entry;

    My codes produces unexpected results. The script only modifies the entry"United States", by replacing it with "Cook Isla...".


    I suspect I don't use the while loop properly. Plus the script does not work at all in IE.

    Could someone have a look and give me a hint what went wrong.
    Thank you very much!!!

    Code:
    <html>
    <head>
    <title> Ellipse Practice </title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <style type="text/css">
    
    ul {
    width: 200px;
    margin-left: 100px;
    }
    
    span {
    white-space: nowrap;
    }
    
    </style>
    <script type="text/javascript">
    function trancateAll() {
    var list=document.getElementsByTagName("li");
    count=0;
    while (count<list.length) {
    
    var text=String(list[count].innerHTML);
    list[count].innerHTML='<span id="mySpan">'+text+'</span>';
    mySpan=document.getElementById("mySpan");
    
    mySpan.innerHTML='';
    var charac=1;
    while( (mySpan.offsetWidth<70) && (charac<text.length)) {
    
    mySpan.innerHTML=text.substr(0,charac)+"...";
    charac++;
    
    }
    
    
    count++;
    
    }
    
    }
    
    </script>
    </head>
    <body >
    <ul>
    <li> United States</li>
    <li> Australia</li>
    <li> New Zealand</li>
    <li> Democratic Republic of Congo</li>
    <li> Russian Federation</li>
    <li> Cook Islands</li>
    </ul>
    <input type="button" value="Truncate" onclick="trancateAll()"/>
    </body>
    </html>
    Last edited by chickentulip; 01-23-2012 at 09:34 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,143
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    When you reach this line of code:
    Code:
        mySpan=document.getElementById("mySpan");
    You don't have anything on that page with an id of "mySpan", so you get an error and the code stops right there. So of course only the first one gets changed.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    chickentulip (01-24-2012)

  • #3
    New Coder
    Join Date
    Oct 2010
    Location
    Toronto
    Posts
    95
    Thanks
    52
    Thanked 0 Times in 0 Posts
    Thank you. I understand now where I made an error


  •  

    Posting Permissions

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