So i'm working on a chat application and i want to add smileys. So i used two html pages. the first one contain the text area when we wright the messages and an iframe that references the second html page.

```
<div class="col-12">
   <textarea  class="col-12 row-12 var_MessageInput" id="textmsg" placeholder="Write a reply..."></textarea>
</div>

```

in the second html page i have smiley images 

```
<img src="../../../images/sad_smile.gif"   onclick="insertSmiley('sad');"/>
<img src="../../../images/angel_smile.gif" onclick="insertSmiley('angel');"/>
<img src="../../../images/happy_smile.gif" onclick="insetSmiley('happy');" />

```

So i want that when i click at a smiley image that a text got inserted in my text area so i used the following script

```
function insertSmiley(smiley) {
  var currentText = document.getElementById("textmsg");
  var smileyWithPadding = " " + smiley + " ";
  currentText.value += smileyWithPadding;
  currentText.focus();
}

```

But it doens't work :( i thought the problem might be in document.getElementById since it's another html page but i have no idea how to solve it. 
Thanks a lot