Text is not inserted. after clicking on textarea

Question

What happens is the following:

I am trying to insert an Emoticon into this textarea

<textarea name="mensagem" cols="90" rows="10" placeholder="digite o texto ou cole HTML">[8)]</textarea>

The emoticons are in a bar that you insert when the extension loads. so far [] [] [] [] ] . So far so good;

THE PROBLEM: When I click on an Emoticon, it is inserted into the textarea without major problems, but if I click on the textarea type a text, either beside the Emoticon, below or anywhere, and then click to insert another Emoticon, it simply does not insert any more.

Example:

I clicked and entered the Emoticon > 'Text I’m typing' > Now, when I click again to put another Emoticon, it does not enter the textarea. Simply put, there’s only the first Emoticon, and the text I typed.

JAVASCRIPT CODE:

window.onload = function teste() {
    var salvo = document.querySelector('textarea').onfocus;
    add = document.getElementsByTagName("td")[2].innerHTML = '<a href=javascript:void(0); onclick=a=document.querySelector("textarea").innerHTML="[:(]"><img src="http://app.e-orkut.com/assets/images/emoticons/2.gif"> '
    + '<a href=javascript:void(0); onclick=a=document.querySelector("textarea").innerHTML="[8)]"><img src="http://app.e-orkut.com/assets/images/emoticons/1.gif"></a>' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/3.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/4.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/5.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/6.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/7.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/8.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/9.gif">';
}

Answer 1

Your problem is you’re wearing .innerHTML when you should be wearing .value to change the content of this <textarea>.

That said, how I think you should do it is like this:

function addMe(emoticon, target) {
    return function() {
        target.value += emoticon;
    }
}

window.onload = function() {
    var url = ['http://app.e-orkut.com/assets/images/emoticons/', '.gif'];
    var emoticons = ['[:(]', '[8)]', '[>:(]', '[:)]', '[;)]', '[:D]', '[:o]', '[:p]', '[:)]'];
    var textarea = document.querySelector('textarea');
    var emoticonsElement = document.getElementsByTagName("div")[0];
    for (var i = 0; i < emoticons.length; i++) {
        var img = document.createElement('img');
        img.src = url.join(i + 1);
        emoticonsElement.appendChild(img);
        img.addEventListener('click', addMe(emoticons[i], textarea));
    }
}

Example: https://jsfiddle.net/st4met3d/

That way you always know which element has which Emoticon, the code is more organized and you don’t have HTML spread in the middle of Javascript...