Multiple functions in a for loop

Question

I have a php page with spoilers in wich I use javascript to view or hide the spoilers. This is done by changing classes on the span of each spoiler div (.hidden, .visible). The classes are s1, a1, s2, a2, s3, a3 etc.

I want to select each spoiler and give them an onclick function to view or hide the answer of the clicked spoiler. This can be done which variables in a for loop. I am getting no errors in Chrome debugger, but the classes won't change.

It works fine without the for loop.

This is a part of my php:

<div class="spoiler">
    Is this a second question 
    <a href="#" id="s1">View answer</a>
    <span id="a1" class="hidden">Yes it is</span>
    <hr />
</div>          
<div class="spoiler">
    Is this a second question 
    <a href="#" id="s2">View answer</a>
    <span id="a2" class="hidden">Yes it is</span>
    <hr />
</div>

This is my javascript using jquery:

window.onload = function () {
    for (var i = 1; i < 2; i++) {
        var s = [];
        s[i] = document.getElementById("s" + i);
        s[i].addEventListener("click", function () {
            var a = [];
            a[i] = document.getElementById("a" + i);
            if ($("a" + i).hasClass("hidden")) {
                $("a" + i).removeClass("hidden");
                $("a" + i).addClass("visible");
                $("a" + i).html("Hide answer");
            } else if ($("a" + i).hasClass("visible")) {
                $("a" + i).removeClass("visible");
                $("a" + i).addClass("hidden");
                $("a" + i).html("View answer");
            }
        }, true);
    };
}

Thanks for the help!

Please check some answers to [this SO question](http://stackoverflow.com/q/750486/1169519). — Teemu, Nov 18 '13 at 19:13

PSL · Accepted Answer · 2013-11-18T19:28:07.503

In your case just use $(this).next('span') instead of $("a" + i). Because this in your handler represents the current element clicked on and you want to select the anchor next to it, so you don't have to create the selector. Also the actual reason being, you are using the i as a shared variable inside your handler which would have run to the last value of the iteration by the time your handler gets invoked. Plus you have duplicate ids in your html which will select only the first item matching the selector.

Try:

window.onload = function () {
    for (var i = 1; i <= 2; i++) {

        var s = document.getElementById("s" + i);
        s.addEventListener("click", function () {
            var $this = $(this).next('span'), // or do $('#' + this.id.replace("a",""));
                msg = "View answer";
             $this.toggleClass("hidden visible") 
            if ($this.hasClass("hidden")) {
                msg  = "Hide answer";
            }
            $this.html(msg);
        }, true);
    };
}

Demo

Binding the event with jquery:

$(function(){
    $('.spoiler [id^="s"]').click(function () {
        var $this = $(this).next('span'),
            msg = "View answer";
        $this.toggleClass("hidden visible")
        if ($this.hasClass("hidden")) {
            msg = "Hide answer";
        }
        $this.html(msg);
    });
});

@PSLThe duplicated id's was copied wrong from my working file. I changed $("a" + i) in $this but stil nothing is happening. :( I am searching what could be the problem. Should I name $("a" + i) into $(this) in the if and else if statements also? — user3005930, Nov 18 '13 at 19:18
Thank you so much! This worked it out! Thank you! Been in this situation the whole day! :) — user3005930, Nov 18 '13 at 19:25
How do i accept the answer? I am new to this. I can't upvote. — user3005930, Nov 18 '13 at 19:28
@user3005930 You can select the tick mark just below the answer. Also see my second snippet binding the event with jquery.. you can avoid all those loops — PSL, Nov 18 '13 at 19:28

Multiple functions in a for loop

1 Answers1