Need help shortening javascript codes into 1 function

Discussion in 'JavaScript' started by tobydawson13, Jul 9, 2010.

  1. #1
    Hi :)

    Could somebody please help me out? Is it possible to put all the onclick functions in the code below into 1 function? As I need to shorten the code a little, how would you edit the script below to make it shorter?

    Thanks for the help.

    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':)'"><img src="images/smilie.gif" width="20" height="20" alt="Smile" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':('"><img src="images/sad.gif" width="20" height="20" alt="Sad" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':angry:'"><img src="images/angry.gif" width="20" height="20" alt="Angry" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':D'"><img src="images/biggrin.gif" width="18" height="18" alt="Big Grin" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':blink:'"><img src="images/blink.gif" width="20" height="20" alt="Blink" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':blush:'"><img src="images/blush.gif" width="18" height="18" alt="Blush" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+'B)'"><img src="images/cool.gif" width="20" height="20" alt="Cool" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+'^_^'"><img src="images/happy.gif" width="18" height="18" alt="Happy" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':huh:'"><img src="images/confused.gif" width="18" height="25" alt="Huh" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':lol:'"><img src="images/laugh.gif" width="20" height="20" alt="Laugh" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':o'"><img src="images/ohmy.gif" width="18" height="18" alt="Oh My" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':fear:'"><img src="images/fear.gif" width="25" height="25" alt="Fear" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':rolleyes:'"><img src="images/rolleyes.gif" width="20" height="20" alt="Rolleyes" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':sleep:'"><img src="images/sleep.gif" width="18" height="26" alt="Sleep" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':p'"><img src="images/tongue.gif" width="20" height="20" alt="Tongue" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':unsure:'"><img src="images/unsure.gif" width="18" height="18" alt="Unsure" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':wacko:'"><img src="images/wacko.gif" width="18" height="25" alt="Wacko" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':wink:'"><img src="images/wink.gif" width="20" height="20" alt="Wink" /></a>
    <a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+':wub:'"><img src="images/wub.gif" width="20" height="25" alt="Wub" /></a>
    
    <form id="form1" name="form1" method="post" action="#">
    <textarea name="detail" cols="50" rows="5" id="detail"></textarea>
    </form>
    HTML:
     
    tobydawson13, Jul 9, 2010 IP
  2. Kaimi

    Kaimi Peon

    Messages:
    60
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    
    <script>
    function emotion(type)
    {
    	document.forms[0].detail.value = document.forms[0].detail.value+type;
    }
    </script>
    <a href="javascript:;" onclick="emotion(':)')"><img src="images/smilie.gif" width="20" height="20" alt="Smile" /></a>
    <a href="javascript:;" onclick="emotion(':(')"><img src="images/sad.gif" width="20" height="20" alt="Sad" /></a>
    <a href="javascript:;" onclick="emotion(':angry:')"><img src="images/angry.gif" width="20" height="20" alt="Angry" /></a>
    <a href="javascript:;" onclick="emotion(':D')"><img src="images/biggrin.gif" width="18" height="18" alt="Big Grin" /></a>
    <a href="javascript:;" onclick="emotion(':blink:')"><img src="images/blink.gif" width="20" height="20" alt="Blink" /></a>
    <a href="javascript:;" onclick="emotion(':blush:')"><img src="images/blush.gif" width="18" height="18" alt="Blush" /></a>
    <a href="javascript:;" onclick="emotion('B)')"><img src="images/cool.gif" width="20" height="20" alt="Cool" /></a>
    <a href="javascript:;" onclick="emotion('^_^')"><img src="images/happy.gif" width="18" height="18" alt="Happy" /></a>
    <a href="javascript:;" onclick="emotion(':huh:')"><img src="images/confused.gif" width="18" height="25" alt="Huh" /></a>
    <a href="javascript:;" onclick="emotion(':lol:')"><img src="images/laugh.gif" width="20" height="20" alt="Laugh" /></a>
    <a href="javascript:;" onclick="emotion(':o')"><img src="images/ohmy.gif" width="18" height="18" alt="Oh My" /></a>
    <a href="javascript:;" onclick="emotion(':fear:')"><img src="images/fear.gif" width="25" height="25" alt="Fear" /></a>
    <a href="javascript:;" onclick="emotion(':rolleyes:')"><img src="images/rolleyes.gif" width="20" height="20" alt="Rolleyes" /></a>
    <a href="javascript:;" onclick="emotion(':sleep:')"><img src="images/sleep.gif" width="18" height="26" alt="Sleep" /></a>
    <a href="javascript:;" onclick="emotion(':p')"><img src="images/tongue.gif" width="20" height="20" alt="Tongue" /></a>
    <a href="javascript:;" onclick="emotion(':unsure:')"><img src="images/unsure.gif" width="18" height="18" alt="Unsure" /></a>
    <a href="javascript:;" onclick="emotion(':wacko:')"><img src="images/wacko.gif" width="18" height="25" alt="Wacko" /></a>
    <a href="javascript:;" onclick="emotion(':wink:')"><img src="images/wink.gif" width="20" height="20" alt="Wink" /></a>
    <a href="javascript:;" onclick="emotion(':wub:')"><img src="images/wub.gif" width="20" height="25" alt="Wub" /></a>
    
    <form id="form1" name="form1" method="post" action="#">
    <textarea name="detail" cols="50" rows="5" id="detail"></textarea>
    </form>
    
    Code (markup):
     
    Kaimi, Jul 9, 2010 IP
  3. tobydawson13

    tobydawson13 Active Member

    Messages:
    645
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #3
    Thanks mate :)
     
    tobydawson13, Jul 9, 2010 IP