SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I want to show three elements of the list however it only shows the first

    Good night!
    I am studying the book Only JS Javascript (sitepoint).
    In Chapter 3, I'm working with DOM's.

    Code JavaScript:
    window.onload = function ()
    {
        var listItems = document.getElementsByTagName("li");
     
        for (var i = 0; i < listItems.length; i++)
        {
            //alert(listItems[i].nodeValue);
            alert(listItems[i].childNodes[i].nodeValue);
        }
    }

    It only takes the first element of the list in case Paragraph.

    Because the loop is not being done? I want the alert to show me also the other two, unordered list, and list items.
    HTML Code:
    <body>
        <p>
            Há três tipos de elementos neste corpo:
        </p>
    
        <ul>
            <li>parágrafo</li>
            <li>lista não ordenada</li>
            <li>item de lista</li>
        </ul>
    </body>
    Thanks a lot
    Last edited by Mittineague; Sep 17, 2013 at 18:17. Reason: reformatting bbcode tags

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,227
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    Hi RenataFaria, welcome to the forums.

    Please tell me that isn't the exact code the book has. Does your alert show

    for listItems[0].childNodes[0].nodeValue = "parágrafo"
    for listItems[1].childNodes[1].nodeValue = null or undefined
    for listItems[2].childNodes[2].nodeValue = null or undefined

    See the problem?

  3. #3
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mittineague, thanks for your response.

    The code is a bit different from the book, I modified it for the purpose of training.

    In fact, I want to learn as given a content any, in case a list with several options, as I do reading from item to item in this list.

    Thanks

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,227
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    In the example HTML you posted, though the li elements don't show it, they each have a "text node" inside them. Hence the use of childNodes[]
    Your loop is incrementing the variable i but each li has only one text (child) node.

    If you know the HTML will always be this way, you could change i to 0, or you could try using textContent instead of childNode[].nodeValue

  5. #5
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mittineague,
    Perfect response. It worked very well.

    window.onload = function () {;
    var listItems = document.getElementsByTagName("li");
    var qtdItens = listItems.length;

    for (var i = 0; i < qtdItens; i++)
    {
    alert(listItems[i].textContent);
    }
    }


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
  •