Append value from textarea

Question

I am begginner with Jquery/javascript.I was trying to take the value of textarea to append a div .But when i do this with jquery it appends (i suppose) but only shows variable name.Why it happens?

Codepen

 $(document).ready(function() { $('#textbox').click(function(event) { if(event.which=13) { if($('#enter').prop("checked")) { $('#textbox').val(''); event.preventDefault(); } } $('#send').click(function() { var userMessage = $('#textbox').val(); $('#textbox').val(''); $('#container').append("userMessage"); }); }); }); 

 * { padding:0; margin:0; } body { background:#eee; } #container { width:600px; height:500px; background:#fff; border:1px solid black; margin:0 auto; } #controls { margin:0 auto; width:600px; } #textbox { resize:none; width:540px; } #send { width:50px; height:30px; margin-top: 0px; position:absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"></div> <div id="controls"> <textarea id="textbox" placeholder="Enter your message here!"></textarea> <button id="send">Send</button><br> <input type="checkbox" id="enter"><br> <label for="enter">Send on enter</label> </div> 

Answer 1

Close - no quotes around userMessage , so instead of Instead of append("userMessage") use:

$('#container').append(userMessage);

http://codepen.io/anon/pen/NqZGrm

Answer 2

$(document).ready(function() {
  $('#textbox').keydown(function(event) {
    if(event.which==13 && $('#enter').prop("checked")==true) {
      $('#container').append("<br/>"+$('#textbox').val());
      $('#textbox').val('');
      event.preventDefault();
     }
  });

  $('#send').click(function() {
     var userMessage = $('#textbox').val();
     $('#textbox').val('');
     $('#container').append("<br/>"+userMessage);
  });

});