Question

heres a link to the web page s1527.mtchs.org/chat.html

When you submit or hit enter, the value of my textarea is appended to a div. when this happens again, the old value in the div is deleted and appended with the new one? how do I make it so it adds another value instead of deleting the old one?

jQuery:

var captionLength = 0;
var caption = "";

$(document).ready(function()
{
  setInterval ( "cursorAnimation()", 600 );
});

function testTypingEffect()
{ 
if(userInput.value !== "Message")
{
  caption = $("textarea#userInput").val();
  $(caption).append('<div id = content></div>');
  type();
  }
}

function type() 
{
    $('p.caption').html(caption.substr(0, captionLength++));
    if(captionLength < caption.length+1)
    {
        setTimeout("type()", 50);
    }
    else {
        captionLength = 0;
        caption = "";
}   
}
function testErasingEffect()
{
 caption = $("p.caption").html();
  captionLength = caption.length;
 if (captionLength>0)
  {
erase();
 }
 else
  {
$('p.caption').html("You didn't write anything to erase, but ok!");
   setTimeout("testErasingEffect()", 1000);
 }
   }

           function erase()
          {
$('p.caption').html(caption.substr(0, captionLength--));
if(captionLength >= 0)
{
    setTimeout("erase()", 50);
}
else {
    captionLength = 0;
    caption = "";
}   
}

function cursorAnimation() 
{
  $("p.cursor").animate(
 {
   opacity: 0
}, 300, "swing").animate(
 {
 opacity: 1
 }, 300, "swing");
}
$(document).keypress(function(e) {
   if(e.which == 13) {
       testTypingEffect();
  }
});

HTML:

<div id="chatwrapper">
  <div id="tab">chatname</div>
  <div id="content">
    <p id="time"> 2:14:26pm</p>
    <div id="effectTesting">
      <p id="user">\\diablo\\student\2015:</p>
      <p class="caption"></p>
      <p class="cursor">|</p>
    </div>
    <p class="testing"></p>
    <br>
  </div>
  <div id="textarea">
    <textarea id="userInput" onclick="if(this.value=='Message'){this.value=''}" onblur="if(this.value==''){this.value='Message'}">Message</textarea>
    <input type="submit" id="submit" name="submit" value="Submit" onclick="testTypingEffect()"/>
  </div>
</div>

Answer 1

You used .html() instead of .append() on line 21. Changing this was not enough because your dealing with the actual caption length and how to type out the string was not proper so I redid your key functions. See my jsfiddle. I also made it so it adds new content on a new line each time submit is pressed. Also, the cursor will “follow” the content!

See: http://jsfiddle.net/GJBGt/9/

HTML:
Your original HTML

CSS:

span{ float:left; clear:both; margin: 5px 0px; overflow: auto;}
#textarea{ float: left; clear:both}
.cursor{ display:inline }

JS:

var caption = "";
//you REALLY DON'T NEED variable captionLength that you had here before

$(document).ready(function()
{
  setInterval ( "cursorAnimation()", 600 );
});

function testTypingEffect()
{ 
if(userInput.value !== "Message")
{
  caption = $("textarea#userInput").val();

  typefirst();
  }
}

function typefirst() 
{
    $('p.caption').append("<span></span>");
    type();
}

function type()
{
    $("span").eq(-1).append(caption.substr(0, 1));
    $(".cursor").appendTo($("span").eq(-1));
    if(caption.length > 0)
    {
        caption = caption.substring(1);
        setTimeout("type()", 50);
    }
    else {
        caption = "";
}