Smilie system: Event to add image in textarea fails

Question

I'm trying to create a personalized smilies system to train my JavaScript. To accomplish that I have an offline system to save the various user smilies (I only save the urls).

After obtaining the data I try to make them appear above the textarea I want. So far so good!

Now, the problem comes when it's time to add the events to the images. I try to add event listeners to each image but no matter which image I press only the last image event is triggered.

This is: all images appear side by side correctly but what is inserted in the textarea is the last image that is iterated in the cycle.

Meaningful code:

/* Insert the code in the right place in the textarea*/
function putInTxtarea(text, textarea) {
    // Mozilla text range replace.
    if (typeof(textarea.selectionStart) != "undefined") {
        var begin = textarea.value.substr(0, textarea.selectionStart);
        var end = textarea.value.substr(textarea.selectionEnd);
        var scrollPos = textarea.scrollTop;
        textarea.value = begin + text + end;

        if (textarea.setSelectionRange)
        {
            textarea.focus();
            textarea.setSelectionRange(begin.length + text.length, begin.length + text.length);
        }
        textarea.scrollTop = scrollPos;
    }
    // Just put it on the end.
    else {
        textarea.value += text;
        textarea.focus(textarea.value.length - 1);
    }


var elem = document.createElement("div");
elem.id = "mySmilies";
elem.innerHTML = "";

for each (url in smiliesUrl){
    var img = document.createElement("img");
    img.src = url;
    img.style.cursor = "pointer";
    img.addEventListener('click', 
        function(){putInTxtarea('[img]'+url+'[/img]', document.getElementsByName('message')[0]);
              };, false); // here is the event attaching

    elem.appendChild(img);
}

Felix Kling · Accepted Answer · 2011-02-16T09:46:30.540

Don't use for each...in. This is a construct only available in Firefox (at least it is non-standard).

You are making the typical creating-a-function-in-a-loop mistake. JavaScript has only function scope. Every function you create in the loop has references to the same variables (url in your case) and this variable will have the value of the last URL after the loop finished. You need to introduce a new scope:

function createClickHandler(url) {
    var target = document.getElementsByName('message')[0];
    return function() {
        putInTxtarea('[img]'+url+'[/img]', target);
    }

}

// assuming smiliesUrl is an array
for(var i = smiliesUrl.length;i--;) {
    var url = smiliesUrl[i];
    var img = document.createElement("img");
    img.src = url;
    img.style.cursor = "pointer";
    img.addEventListener('click', createClickHandler(url), false);
    elem.appendChild(img);
}

Another possible is to simply access the image from the event handler. It should available via this:

img.addEventListener('click', function(){
    putInTxtarea('[img]'+this.src+'[/img]', 
                  document.getElementsByName('message')[0]);
};, false);

@The Scrum Meister: https://developer.mozilla.org/en/JavaScript/Reference/Statements/For_each...in :) — Felix Kling, Feb 16 '11 at 07:57
@felix-kling Interesting... Add a `var url = smiliesUrl[i]` to your loop. Also, its tough for me to tell if `smiliesUrl` is a array or a object, the OP didn't specify.. — The Scrum Meister, Feb 16 '11 at 07:59

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

This seams to be a closure issue. the variable url points to the url used in the loop, and at the time of execution it is always be the last url.

for(url in smiliesUrl){
    var img = document.createElement("img");
    img.src = url;
    img.style.cursor = "pointer";
    var func = function(jUrl){
        return function(){
            putInTxtarea('[img]' + jUrl + '[/img]', 
            document.getElementsByName('message')[0]);
        };
    }(url);
    img.addEventListener('click', func, false);
}

For more on closures in javascript see This question

edited May 23 '17 at 10:33

Community

1
1

answered Feb 16 '11 at 07:48

The Scrum Meister

29,681
8
66
64

That's the thing I was looking for. Just needed a function inside a function in order to create a new variable. Thank you. – brunoais Feb 16 '11 at 09:00
@user551625: But don't use `for...in` to loop over an array. Use a normal `for` loop. – Felix Kling Feb 16 '11 at 09:26

Smilie system: Event to add image in textarea fails

2 Answers2