Insert text into an undetermined number of spans, For Loop Javascript

Question

I have this span:

<span class="spanComments" cols="100" rows="5"></span>

being called by this :

<a href="#" rel="@currentShowing.ShowingGUID" class="showComments noprint" id="comments-sendlink" onclick="showComments()">View Comments</a>

using this function:

    function showComments() {
    for (var arg = 0; arg < arg.length; ++arg) {
        var arr = arguments[arg];
        for (var i = 0; i < arr.length; ++ i) {
            document.getElementById("spanComments").innerHTML = "This is comment #" + arr[i];
        }
    }
}

I used this SO question as my basis to no avail: JavaScript For Loop

I'm not getting my span to populate anything (it's completely empty) I have tested my showComments() and it works (prior to me entering the for loop) and it worked.

I'm new to JavaScript, so I wouldn't be surprised if it were something really easy that I might have overlooked. Thanks in advance.

`arg` is defined twice, first you use that name for the iterator, and then you seem to have an array with the same name, which isn't possible. — adeneo, May 15 '15 at 16:04
If both loops work fine your span will just take the last value. — Samurai, May 15 '15 at 16:07
The second loop never runs because the first loop is completely wrong. — adeneo, May 15 '15 at 16:07
I mean come on `var arg = 0; arg < arg.length; ++arg` , how would a zero have length ? — adeneo, May 15 '15 at 16:08
What do you expect for output? Your code appears to overwrite rather than append comments. Is that what you want? — Yogi, May 15 '15 at 16:13
No, I would like to add to (in this case). "comments #{0}", comment Number. So 1, 2, 3, 4, etc. — Kevin Fischer, May 15 '15 at 16:16

Rob M. · Accepted Answer · 2015-05-15T16:16:25.147

1

Couple problems here: you are iterating over args before it is defined, arguments should be what you are iterating over in your top most loop. Additionally, you are overwriting the same item each time (I assume there are multiple spanComments). I suggest changing to class="spanComments" and using the following:

function showComments() {
   var comments = document.querySelectorAll(".spanComments");
   for(var i = 0; i < comments.length; i++) {
      comments[i].innerHTML = "This is comment #" + i;
   }
}

edited May 15 '15 at 16:16

answered May 15 '15 at 16:08

Rob M.

35,491
6
51
50

i changed it to class instead of id, and used your function. i'm still getting an empty span – Kevin Fischer May 15 '15 at 16:12
@KevinFischer Can you clarify how you are calling `showComments`? – Rob M. May 15 '15 at 16:13
i'll post the on here. one sec – Kevin Fischer May 15 '15 at 16:14
It looks like you really aren't using arguments at all (only the event is passed here), I've updated my answer – Rob M. May 15 '15 at 16:16
As @Samurai noted, ther original code only displays the last value. This snippet appears to do the same. So I don't understand the point of looping ... just display the final comment. – Yogi May 15 '15 at 16:45
it actually doesn't. the string changes "This is comment #1", "This is comment #2", "This is comment #3", etc. I'm going to be using this as a basis for another project and I had to figure out how to loop into a span – Kevin Fischer May 15 '15 at 19:32

Insert text into an undetermined number of spans, For Loop Javascript

1 Answers1