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.

Answer 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.