Difficulty developing unique dynamic onclick events in Javascript

Question

I am working with a decent sized set of data relating to objects on the page and some objects need links applied to them onclick. The link to connect to is part of the dataset and I build a string for the link with the variable linkTarget and apply it like so.

 if (dataTag[i][3]==true){

    if(prepend==undefined || prepend=="undefined"){                         
        var linkTarget=ResultsJSON["targetUrl"];
        ele.onclick = function(){
            window.open(linkTarget);
        };
    } else {
        var linkTarget=prepend+ResultsJSON["targetUrl"];
        ele.onclick = function(){
            window.open(linkTarget);
        };
    }

ele refers to an element picked up with getElementByID. Now I am going through quite a few objects and the problem I have is the onclick for every object is the last value of linkTarget. This is all contained in a function and link target is a local variable so I have no idea why. I have tried using an array with something like

ele.onclick=function(){window.open(linkTarget[linkTarget.length-1]);};

and even

ele.onclick=function(){window.open(linkTarget.valueOf());};

with the same results. I am at a loss now and would appreciate any help.

My spider sense tells me you fell in the classic closures in for-loops trap. — hugomg
– hugomg, Commented Nov 19, 2011 at 3:20

gilly3 · Accepted Answer · 2011-11-19 03:47:55Z

3

Use Array.forEach() to iterate your data and watch your troubles melt away.

dataTag.forEach(function (item) {
    if (item[3]==true) {
        var linkTarget = "";
        if (prepend==undefined || prepend=="undefined") {
            linkTarget = prepend;
        }
        linkTarget += ResultsJSON.targetUrl;
        ele.onclick = function () {
            window.open(linkTarget);
        };
    }
});

See this compatibility note for using Array.forEach() in older browsers.

edited Nov 19, 2011 at 3:47

answered Nov 19, 2011 at 3:24

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hugomg Over a year ago

did you mean "... and watch this problems start to pop up"? :P

gilly3 Over a year ago

Ya, maybe. The solution requires calling a function one way or another. Dealing with the new context is unavoidable. At least with .forEach() you are able to specify the value of this via the second argument.

Ry- · Accepted Answer · 2011-11-19 03:23:52Z

1

You're in a loop — therefore, you need to put your things-to-be-executed in another function, like so:

 if(dataTag[i][3]) {
    if(prepend) {   
        (function(linkTarget) {
            ele.onclick = function() {
                window.open(linkTarget);
            };
        })(ResultsJSON.targetUrl);
    } else {
        (function(linkTarget) {
            ele.onclick = function() {
                window.open(linkTarget);
            };
        })(ResultsJSON.targetUrl);
    }

I also made some general corrections.

answered Nov 19, 2011 at 3:23

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

1 Comment

Noel Proulx Over a year ago

Thank You I was banging my head on this problem

Collectives™ on Stack Overflow

Difficulty developing unique dynamic onclick events in Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related