Estoy tratando de presentar una lista de posibles smilys, cuando el usuario hace clic en ellos, la marca específica :P o :+, por ejemplo, debe publicarse en el área de texto después o entre el texto que ya escribió. No puedo hacer que funcione. ¿Qué estoy haciendo mal?

área de texto:

 <textarea id="SendMessageForm" cols=1 rows=1 oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"' type="text" wrap="virtual" data-token="<?php echo $token; ?>" data-messageto="<?php echo $LoadMessageFromUser; ?>" class="form-control hass-message-input" placeholder="Type your message"></textarea>

Muestra para los smilys y la llamada a la función.

 <img src="emoticons/clown.gif" alt="Emoticon" onClick="insertEmoticon(':+');" /> <img src="emoticons/puh2.gif" alt="Emoticon" onClick="insertEmoticon(':P');" />

Javascript para que esto suceda

 function insertEmoticon(smiley){ var myField = document.getElementById(SendMessageForm); if (document.selection) { myField.focus(); var sel = document.selection.createRange(); if (sel.text == "") { sel.text += smiley; myField.focus(); } else { sel.text = smiley; } } else if (myField.selectionStart || myField.selectionStart == '0') { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; if (startPos == endPos) { } else { var str = myField.value.substring(startPos, endPos); } var myVal = smiley; myField.value = myField.value.substring(0, startPos)+ myVal + myField.value.substring(endPos, myField.value.length); } else { myField.value += smiley; }}

Cualquier ayuda es bienvenida (perdón por mi idioma)