# Insert smileys

**URL:** <https://forum.kirupa.com/t/insert-smileys/262623>\
**Category:** web dev\
**Created:** [June 8, 2008, 1:45am UTC](https://forum.kirupa.com/t/insert-smileys/262623 "2008-06-08T01:45:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)\
**Post date:** [June 8, 2008, 1:45am UTC](https://forum.kirupa.com/t/insert-smileys/262623/1 "2008-06-08T01:45:50Z")

</div>

**[http://www.only-jojo.com/temp/english/news/comments.php?id=15](http://www.only-jojo.com/temp/english/news/comments.php?id=15)**

When the user clicks a smiley icon, javascript should insert some smiley text into the message box. For some reason, my insertion function only works when the user has not typed any normal text into the message box. It won’t insert any smiley text after the user edits their message.

```php

<script type="text/javascript">
	function insertSmiley(smiley)
	{
		var currentText = document.getElementById("message");
		var smileyWithPadding = " " + smiley + " ";
		currentText.innerHTML += smileyWithPadding;
	}
</script>

```

```auto

<textarea name="message" rows="5" id="message"></textarea>

<img src="interface/bigSmile.gif" onclick="insertSmiley(':-D')" />
<img src="interface/cantLook.gif" onclick="insertSmiley(':-P')" />
<img src="interface/cry.gif" onclick="insertSmiley(':=(')" />
<img src="interface/devious.gif" onclick="insertSmiley('=:)')" />
<img src="interface/huh.gif" onclick="insertSmiley('o_0')" />
<img src="interface/knockedOut.gif" onclick="insertSmiley('x-)')" />
<img src="interface/puzzled.gif" onclick="insertSmiley(':-~')" />
<img src="interface/regularSmile.gif" onclick="insertSmiley(':-)')" />
<img src="interface/shocked.gif" onclick="insertSmiley(':-o')" />
<img src="interface/snooze.gif" onclick="insertSmiley('z:-)')" />
<img src="interface/tongue.gif" onclick="insertSmiley(':-P')" />
<img src="interface/unsure.gif" onclick="insertSmiley(':-/')" />
<img src="interface/upset.gif" onclick="insertSmiley(':-(')" />

```

---

<div class="post-metadata">

**Author:** ![Raydred](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/raydred/32/65_2.png) [@Raydred](https://forum.kirupa.com/u/Raydred)\
**Post date:** [June 8, 2008, 2:14am UTC](https://forum.kirupa.com/t/insert-smileys/262623/2 "2008-06-08T02:14:49Z")

</div>

this line:

```php
currentText.innerHTML += smileyWithPadding; 

```

should be:

```php
currentText.value += smileyWithPadding; 

```

that will fix it =)

---

<div class="post-metadata">

**Author:** ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)\
**Post date:** [June 8, 2008, 2:35am UTC](https://forum.kirupa.com/t/insert-smileys/262623/3 "2008-06-08T02:35:31Z")

</div>

Thanks. That did the trick.

What is the difference between “value” and “innerHTML” ?

And how do you put the blinking cursor at the end of the text after someone inserts a smiley? I noticed that the user must click again to resume typing.

---

<div class="post-metadata">

**Author:** ![Raydred](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/raydred/32/65_2.png) [@Raydred](https://forum.kirupa.com/u/Raydred)\
**Post date:** [June 8, 2008, 7:31pm UTC](https://forum.kirupa.com/t/insert-smileys/262623/4 "2008-06-08T19:31:13Z")

</div>

[QUOTE=NeoDreamer;2338758]Thanks. That did the trick.

What is the difference between “value” and “innerHTML” ?

And how do you put the blinking cursor at the end of the text after someone inserts a smiley? I noticed that the user must click again to resume typing.[/QUOTE]

The .Value are used on input elements , such as Text boxes, text areas etc, where innerHTML are used for divs (and maybe spans, i forget).

THe .innerHTML was actually saving the smileys , but it wasn’t displaying.

if you want the cursor back in the text area, you need to focus on that control:

```php
currentText.focus();

```

So the complete code would be:

```php
<script type="text/javascript">
    function insertSmiley(smiley)
    {
	
        var currentText = document.getElementById("message");
		
        var smileyWithPadding = " " + smiley + " ";
        currentText.value += smileyWithPadding;
	currentText.focus();
	
    }
</script>

```