Setting up onclick handlers into for

Question

I have array this.conds = ["addr", "acc"] for example. I have all these DOM objects in html tree. All for this piece of code:

     for(cond in this.conds) {

        this.searchBy[this.conds[cond]] = {
            "btn": $("#" + this.conds[cond] + "Btn"),
            "fields": $("#" + this.conds[cond] + "Fields"),
            "active": false
        };

        // Handlers
        __THIS = this;
        this.searchBy[this.conds[cond]].btn.click(function() {

            __THIS.setAllUnactive();
            __THIS.searchBy[__THIS.conds[cond]].active = true;
            __THIS.searchBy[__THIS.conds[cond]].fields.show();

        });

    }

I cant make handler to handle current element of this.conds. It handle last element every time. How to avoid this wrong behavior?

`cond` before handler has numeric value (indexes of `this.conds` array), but inside handler `cond` has string value (values of `this.conds` array). How?? — Neka, Mar 24 '14 at 07:37

Scimonster · Accepted Answer · 2014-03-24T07:56:09.753

This is a pretty common JavaScript pitfall. JS doesn't have block context; any variables you set in a block go up to the surrounding context. You have a few options here:

Use $.each() to loop, as it takes a function, and consequently keeps context.
Use [].forEach(), which is similar to $.each(), but native JS. (Note: not available in older browsers.)
Wrap each iteration in a function, like this

function handleCond(cond) { // put all that code here } for(cond in this.conds) { handleCond(this.conds[cond]); }

I should note that it's better not to use a for...in loop for arrays. Use $.each() or for (i=0;i<list.length;i++) instead.

EDIT: In option 3, remember to switch this.conds[cond] to plain cond.

Thanks! (3) works well. But other 2 will be useful too! – Neka Mar 24 '14 at 07:54 — Neka, Mar 24 '14 at 07:54

Setting up onclick handlers into for

1 Answers1