Insert smileys

programming web dev
1

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.


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



<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(':-(')" />
2

this line:

currentText.innerHTML += smileyWithPadding;

should be:

currentText.value += smileyWithPadding;

that will fix it =)

3

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.

4

[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:

currentText.focus();

So the complete code would be:

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