Click emoji and place in input field

function smileySelect(event) {
  /*
  event.target = the actually clicked element
  event.currentTarget = the element that has the event handler
  
  When they are not equal we know the click was on a child of the .emoji element.
  Any child is valid since you only have the emoticon span elements inside the .emoji element.
  */
  if (event.target != event.currentTarget) {
    let smiley = event.target;
    document.querySelector('#text').value += smiley.textContent;
  }
};


<div id="wrapper">
  <div class="bubble-container"></div>
</div>

<div class="emoji" onclick="javascript:smileySelect(event);">
  <span title="Happy Face"> 😀 </span>
  <span title="Grinning Face"> 😃 </span>
  <span title="Grinning Face with Smiling Eyes"> 😄 </span>
</div>

<div id="sendCtrls">
  <input type="text" placeholder="Your message here" id="text">
  <button id="myBtn" style="width: auto;"> Send </button>
  <span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>