CODEWITHSUNDEEP
javascriptfor-loopgetelementsbytagname
user976813
user976813

Reputation: 77

Please assist me with this simple script

I am new to JavaScript and would like to ask for some help with my simple script.

What I am trying to do is to retrieve and display the values of all list item elements in the unordered list with the help of the (for) loop. I was able to get the script display all list items in the alert window one by one. But the problem is that I need values of all list elements displayed in a table row way. Like this:

Monday
Tuesday
Wednesday
.......

Here is what I have in my script:

<script language="JavaScript">
<!--
    function process() {
        a = document.getElementsByTagName('li')

        for (i = 0; i < a.length; i++) {
            alert(a[i].childNodes[0].nodeValue);
        }
    }
//-->
</script>

And here is HTML code:

<body>
    <ul>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
    </ul>

    <input type="button" value="Submit" onclick="process()" />
</body>

If that's possible at all would anyone please also explain where I am wrong in my script? Why all 3 list item values can't be shown in the alert window at once?

Thanks a lot!

Upvotes: 0

Views: 90

Answers (6)

RyanAppMobi
RyanAppMobi

Reputation: 34

These few adjustments to your function should produce the result you want. Good luck! What changed: 1) Set up an empty string var 2) Instead of alerting each value, just append them to the string var you created earlier 3) Finally, alert the newly created (concatenated) string!

function process() {
    a = document.getElementsByTagName('li');
    var days = new String("");

    for (i = 0; i < a.length; i++) {
        days = days+(a[i].childNodes[0].nodeValue)+"\n";
    }
    alert(days);
}

Now I see there have been tons of answers since opening this thread... but maybe all the different solutions will help you in different ways.

Upvotes: 0

John Keyes
John Keyes

Reputation: 5604

You can process the days in whatever manner you like by storing them in an array first, and then iterating:

var days = new Array();
var a = document.getElementsByTagName('li')
for(var i = 0; i < a.length; i++) {
    days.push(a[i].childNodes[0].nodeValue);
}

for (i=0; i < days.length; i++) {
    // process the day
}

See: http://jsfiddle.net/jkeyes/Cfg4k/ for a working example.

Upvotes: 0

Julian
Julian

Reputation: 2061

function process()
{
  var a = getElementsByTagName('li'),
      text = '';

  for( i = 0; i < a.length; i++ )
  {
    text += a[i].childNodes[0].nodeValue + '\n';
  }

  alert( text );
}

Upvotes: 0

James Allardice
James Allardice

Reputation: 166031

The alert shows repeatedly because that is what a for loop does... it loops! The loop will iterate over the array of elements returned by getElementsByTagName, executing the loop body once for each element in that array.

If you wanted to display one alert, an option would be to build up a string containing the appropriate text, and alert it afterwards:

var yourString = "";
for(i=0;i<a.length;i++){
    yourString += a[i].childNodes[0].nodeValue;
}
alert(yourString);

Some other notes on your code... you should almost always declare variables with the var keyword to prevent them leaking into the global scope. You should also always end lines with semi-colons:

function process(){
    var a = document.getElementsByTagName('li'),
        yourString = "";
    for(i=0;i<a.length;i++){
        yourString += a[i].childNodes[0].nodeValue;
    }
    alert(yourString);
}

Upvotes: 1

Patrick Desjardins
Patrick Desjardins

Reputation: 140973

<script language="JavaScript">
<!--

    function process(){
        var data = '';
        a=document.getElementsByTagName('li')

            for(i=0;i<a.length;i++){

                    data = data  + '\n' +(a[i].childNodes[0].nodeValue);
            }
         alert(data);
    }


//-->
</script>

You need to call alert only once if you need 1 popup with all the text.

Upvotes: 0

Rob W
Rob W

Reputation: 349142

First, create a string variable: var all_at_once = "". Then, add the contents of the nodeValue. Finally, alert this variable:

function process(){
    var a = document.getElementsByTagName('li')
    var all_at_once = "";
    for(i=0;i<a.length;i++){
        all_at_once += a[i].childNodes[0].nodeValue + " ";
    }
    alert(all_at_once);
}

Upvotes: 1

Related Questions