Text is not entered. after clicking textarea

1

What happens is as follows:

I'm trying to insert an emoticon in 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 inserts when the extension loads.  so one side of the other [] [] [] []. 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 to type a text, either next to the emoticon, below or anywhere, and then click to insert another emoticon, it simply does not insert no more.

Example:

I clicked and entered the emoticon > 'Text that I am typing' > Now, when I click again to add another emoticon, it does not enter the textarea. Simply, there is only the first emoticon, and the text that 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">'+'<ahref=javascript:void(0);onclick=a=document.querySelector("textarea").innerHTML="[8)]"><img src="http://app.e-orkut.com/assets/images/emoticons/1.gif"></a>'+'<imgsrc="http://app.e-orkut.com/assets/images/emoticons/3.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/4.gif">'+'<imgsrc="http://app.e-orkut.com/assets/images/emoticons/5.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/6.gif">'+'<imgsrc="http://app.e-orkut.com/assets/images/emoticons/7.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/8.gif">'+'<imgsrc="http://app.e-orkut.com/assets/images/emoticons/9.gif">';
}
    
asked by anonymous 16.05.2016 / 03:02

1 answer

2

Your problem is that you are using .innerHTML when you should be using .value to change the contents of this <textarea> .

That said, as I think you should do this 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: link

In this way you always know which element has the emoticon, the code is more organized and you do not have HTML spread in the middle of JavaScript ...

    
16.05.2016 / 06:20