单击按钮时，将值添加到文本区域

Question

<script type="text/javascript">

$(document).ready(function() {
     $(".buttons").click(function(){
         var cntrl = $(this).html(); 
         $("#txt-area").text(cntrl+",");

         //alert (cntrl);
     });
});

</script>

When I click to my character on my html page character's value sets to textarea, but when I click to another character previous char disappears. I know about something about arrays in JS but how can I handle this.

How can I add values to textarea properly without disappearing?

Answer 1

Try

$(document).ready(function () {
    $(".buttons").click(function () {
        var cntrl = $(this).html();
        $("#txt-area").val(function (_, val) {
            return val + cntrl + ","
        });

        //alert (cntrl);
    });
});

Demo: Fiddle

or

$("#txt-area").text($("#txt-area").val() + cntrl+",");
$("#txt-area").append(cntrl + ",");

Demo: Fiddle - I prefer using val() because I consider it as a input element

Answer 2

Arun's answer above works, but it will add a comma to the end. If you want to avoid that, place the comma before the new value, and then have the code check to see if this is the first time something is being added, and not place a comma that time.

$(document).ready(function () {
    var oldvalue;
    var newvalue;
    $(".buttons").click(function () {
        oldvalue = $("#txt-area").val();  //GET THE VALUE OF TEXTBOX WHEN USER CLICKS
        if (oldvalue) {newvalue = ', '+$(this).html();} // IF THE TEXTBOX ISN'T BLANK, PLACE A COMMA BEFORE THE NEW VALUE
        else {newvalue = $(this).html();} //IF THE TEXTBOX IS BLANK, DON'T ADD A COMMA
        $("#txt-area").val(oldvalue + newvalue); //PLACE THE ORIGINAL AND NEW VALUES INTO THE TEXTBOX.
    });
});

Answer 3

Try,

$(document).ready(function() { 
     $(".buttons").click(function(){ 
          var cntrl = $(this).html();
          var xTxtArea = $("#txt-area");
          xTxtArea.text(xTxtArea.text() + cntrl + ","); 
     }); 
});