Javascript: Why is the onclick event only working for the last iteration of a for loop that builds links?

Question

I have a for loop that builds a variable called thisInfo and then invokes a function that builds an anchor. The for loop calls the function with an IIFE:

(function(info) { createInfoLink(info); })(thisInfo);

And the function is as follows:

function createInfoLink(info) {
var a = document.createElement("a");
a.href = "javascript:;";
a.innerHTML = ">> Click to copy information to email/text field";
a.className = 'smallgreenlink'; 
(function(info) { 
    a.attachEvent('onclick', function() { 
        var textField = document.getElementById("MESSAGE_CONTENT");
        if (textField.value != "") textField.value += "<br>";
        textField.value += info;
    }); 
})(info);
document.getElementById("VISIBLE_INFO").appendChild(a);
}

I've tried various ways of handling the onclick event of the links, but no matter what only the last link built seems to observe the event, what am I doing wrong? Please note that some end users may be running some very old versions of IE.

Edit The code runs on an in-house system at work that has its own javascript/vbscript libraries so difficult to provide a runnable instance. However, here is the for loop:

function presentInfo() {
var info = document.getElementById("VISIBLE_INFO");
info.innerHTML = "<br>";
var len = document.getElementById("DOS_ROW_RESULTS").value;
var orgName = document.getElementById("RETURNED_ORGANISATION_NAME");
var services = document.getElementById("RETURNED_DESCRIPTION_OF_SERVICES");
var delAddress = document.getElementById("RETURNED_DELIVERY_ADDRESS");
var delName = document.getElementById("RETURNED_DELIVERY_CONTACT_NAME");
var delTel = document.getElementById("RETURNED_DELIVERY_CONTACT_TEL");
var delEmail = document.getElementById("RETURNED_DELIVERY_CONTACT_EMAIL");
var criteria = document.getElementById("RETURNED_ELIGIBILITY_CRITERIA");
var availability = document.getElementById("RETURNED_SERVICE_AVAILABILITY");
var servTimes = document.getElementById("RETURNED_SERVICE_TIMES");
var delMethod = document.getElementById("RETURNED_DELIVERY_METHOD");
var servStatus = document.getElementById("RETURNED_SERVICE_STATUS");
var priName = document.getElementById("RETURNED_PRIMARY_CONTACT_NAME");
var priAddress = document.getElementById("RETURNED_PRIMARY_ADDRESS");
var priTel = document.getElementById("RETURNED_PRIMARY_CONTACT_TEL");
var priEmail = document.getElementById("RETURNED_PRIMARY_CONTACT_EMAIL");
var thisInfo;
for (i=0;i<len;i++) {
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"ORGANISATION_NAME","RETURNED_ORGANISATION_NAME");
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"DESCRIPTION_OF_SERVICES","RETURNED_DESCRIPTION_OF_SERVICES");
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"DELIVERY_ADDRESS","RETURNED_DELIVERY_ADDRESS");
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"DELIVERY_CONTACT_NAME","RETURNED_DELIVERY_CONTACT_NAME");
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"DELIVERY_CONTACT_TEL","RETURNED_DELIVERY_CONTACT_TEL");
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"DELIVERY_CONTACT_EMAIL","RETURNED_DELIVERY_CONTACT_EMAIL");
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"ELIGIBILITY_CRITERIA","RETURNED_ELIGIBILITY_CRITERIA");
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"SERVICE_AVAILABILITY","RETURNED_SERVICE_AVAILABILITY");
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"SERVICE_TIMES","RETURNED_SERVICE_TIMES");
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"DELIVERY_METHOD","RETURNED_DELIVERY_METHOD");
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"SERVICE_STATUS","RETURNED_SERVICE_STATUS");
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"PRIMARY_CONTACT_NAME","RETURNED_PRIMARY_CONTACT_NAME");
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"PRIMARY_ADDRESS","RETURNED_PRIMARY_ADDRESS");
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"PRIMARY_CONTACT_TEL","RETURNED_PRIMARY_CONTACT_TEL");
    user_cv1__GetQueryField(document,this,"DOS_QUERY_XML",i,"PRIMARY_CONTACT_EMAIL","RETURNED_PRIMARY_CONTACT_EMAIL");      
    thisInfo = "<span class='smallblackbold'>Organisation Name: </span><span class='smallback'>"+orgName.value+"</span><br>";
    if (services.value) thisInfo += "<span class='smallblackbold'>Description: </span><span class='smallback'>"+services.value+"</span>";
    if (priName.value || priTel.value || priEmail.value || priAddress.value) {
        thisInfo += "<br><span class='smallblackbold'>Contact Details for the Service: </span>";
        if (priName.value) {
            thisInfo += "<span class='smallback'>"+priName.value+"</span>";
            if (priTel.value || priEmail.value || priAddress.value) thisInfo += ", ";
        }
        if (priTel.value) {
            thisInfo += "<span class='smallback'>"+priTel.value+"</span>";
            if (priEmail.value || priAddress.value) thisInfo += ", ";
        }
        if (priEmail.value) {
            thisInfo += "<span class='smallback'>"+priEmail.value+"</span>";
            if (priAddress.value) thisInfo += ", ";
        }
        if (priAddress.value) thisInfo += "<span class='smallback'>"+priAddress.value+"</span>";
    }
    if (delName.value || delTel.value || delEmail.value || delAddress.value) {
        thisInfo += "<br><span class='smallblackbold'>Where the Service is Delivered: </span>";
        if (delName.value) {
            thisInfo += "<span class='smallback'>"+delName.value+"</span>";
            if (delTel.value || delEmail.value || delAddress.value) thisInfo += ", ";
        }
        if (delTel.value) {
            thisInfo += "<span class='smallback'>"+delTel.value+"</span>";
            if (delEmail.value || delAddress.value) thisInfo += ", ";
        }
        if (delEmail.value) {
            thisInfo += "<span class='smallback'>"+delEmail.value+"</span>";
            if (delAddress.value) thisInfo += ", ";
        }
        if (delAddress.value) thisInfo += "<span class='smallback'>"+delAddress.value+"</span>";
    }
    if (delMethod.value) thisInfo += "<br><span class='smallblackbold'>Delivery Method: </span><span class='smallback'>"+delMethod.value+"</span>";
    if (availability.value) thisInfo += "<br><span class='smallblackbold'>Service Availability: </span><span class='smallback'>"+availability.value+"</span>";
    if (servTimes.value) thisInfo += "<br><span class='smallblackbold'>Service Times: </span><span class='smallback'>"+servTimes.value+"</span>";
    if (servStatus.value) thisInfo += "<br><span class='smallblackbold'>Service Status: </span><span class='smallback'>"+servStatus.value+"</span>";
    if (criteria.value) thisInfo += "<br><span class='smallblackbold'>Eligibility Criteria: </span><span class='smallback'>"+criteria.value+"</span>";
    thisInfo += "<br>";
    info.innerHTML += thisInfo;
    (function(info) { createInfoLink(info); })(thisInfo);
    if (i < +len-1) info.innerHTML += "<hr><br>";
}

}

*“but no matter what only the last link built seems to observe the event”* So the other ones do nothing, or…? — Ry-, May 15 '18 at 10:28
Please post the `for` loop, it can easily be the source of the problem. — Máté Safranka, May 15 '18 at 10:29
Please provide a **runnable** [mcve] that reproduces the problem — charlietfl, May 15 '18 at 10:29
What is the need of IIFE here also `attachEvent` is non standard — brk, May 15 '18 at 10:30
I've tried various ways of building the onclick event, what you see here is just the latest in my attempts. I use attachEvent instead of addEventListener due to some users running IE<8 — user2634236, May 15 '18 at 10:48
Possible duplicate of [Understanding javascript closure with event handlers](https://stackoverflow.com/questions/19655783/understanding-javascript-closure-with-event-handlers) — Evan Trimboli, May 15 '18 at 11:15

Javascript: Why is the onclick event only working for the last iteration of a for loop that builds links?

0 Answers0