Adding emoji to input field depending on what emoji got clicked

Question

I have these two functions to add a selected emoji to the input field.

However the first click it doesnt show any emoji's, the second click it shows two emoji's and on the third click it shows four emoji's.

Is there any way to fix this?

Thanks.

HTML:

<a id="smiley" title="smiley" href="#" onclick="enableTxt(this)" >&#128515;</a>
<a id="sadface" title="sadface" href="#" onclick="enableTxt(this)" >&#128530;</a>

JQuery:

function enableTxt(elem) {
    var id = $(elem).attr("id");

    //Add emoji to chat when clicked with selected id
    $("#" + id).click(function() {

        $('#usermsg').val($('#usermsg').val() + $("#" + id).html());
    });
}

Answer 1

You're getting mixed up between inline event handlers and unobtrusive event handlers. Basically every time you run "enableTxt" it sets a new "click" event handler onto the same button. So the first time you click nothing happens because it just creates a handler ready for next time. Then the second time you click it runs "enableTxt" (and thus creates another new handler) and the handler which "enableTxt" created the previous time. Then the next time, this effect is doubled, etc etc.

This will work much better:

<a id="smiley" title="smiley" href="#" class="emoji" >&#128515;</a>
<a id="sadface" title="sadface" href="#" class="emoji" >&#128530;</a>

JS

// this wrapper stops the code from declaring the handler until the page has loaded 
// all the elements, otherwise the element we want to bind to might not exist yet

$(function() { 
    $(".emoji").click(function() {
        $('#usermsg').val($('#usermsg').val() + $(this).html());
    });
});

Answer 2

You define this event handler:

$("#" + id).click(function() {

inside the enableTxt function. That means, each time you call the outer function a new event handler is added. Hence your issue.

If you need to have the inline code, i suggest to add the event parameter for future necessities and so, the reduced code is:

function enableTxt(elem) {
    document.querySelector('#usermsg').value += elem.textContent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="smiley" title="smiley" href="#" onclick="enableTxt(this, event)" >&#128515;</a>
<a id="sadface" title="sadface" href="#" onclick="enableTxt(this, event)" >&#128530;</a>
<input type="text" id="usermsg">