Using val ('') to clear a text field

Question

I put the default content in <textarea>using jquery, but then I try to implement a button to clear all new user-added add-ons by <textarea>resetting the source files. I tried using the .val('')jquery click function called to clear <textarea>before re-running the code, but for some reason <textarea>remains empty after I try to reset (job search is done first), I can’t figure it out!

The code is what I'm working on to teach the correct use of the comma in the English class. We work here: https://codepen.io/brentsimpson/pen/EvveKw

function start() {

var text = "We need walnuts, cinnamon, sugar, and milk.";  
var newText;
var selectComma = ","; // this could be any punctuation you want
var hits = [];
var commaCheck;
var commaPlacement;
var progressBar = 0;
var offset = 0;

newText = text.replace(/,/g, '');

$("#commabox").text(newText); //writes newText to textarea
$("#commanumber").text(commanumbertext);

console.log("The sentence is " + text.length + " characters long.");

for(i = 0; i<text.length; i++){
if(text[i] === selectComma){
  commaPlace = i - offset;
  offset = offset + 1;
  hits.push(commaPlace);
    }
}

var commaNumber = hits.length;
var commanumbertext = "There should be " + commaNumber + " commas in this sentence.";
var progressBarProgress = Math.round(100 / hits.length);
$("#progressbardisplay").css('width', progressBar + "%"); // resets the progress bar

console.log("Commas were placed at these characters: " + hits);


/* code runs after keypress and checks if a comma has been placed
   at a place where one was removed */
$( "#commabox" ).keypress(function( event ) {
    commaCheck = event.which;
    console.log( commaCheck + " was pressed." );
    var caret = $("#commabox").caret();
    commaPlacement = caret["begin"]; //assigns value of begin in caret object to commaPlacement
    console.log("Comma placed at " + commaPlacement);
    checkCommaPlacement();
            });

/* this function checks if commas have been placed at the 
 right place in the string. Could probably use indexOf() here instead 
*/
function checkCommaPlacement() {
    a = hits.indexOf(commaPlacement);
    if (commaCheck === 44 && a != -1) {
        progressBar = progressBar + progressBarProgress;
    $("#progressbardisplay").css('width', progressBar + "%");
    console.log("Comma is in array at " + a);
    for (var i = a; i < commaNumber; i++){
        hits[i] += 1; // updates the array places above comma
      }} else {
    console.log("Comma incorrecly placed.") }               
   };

};

start();

$( ".btn" ).click(function() {
  $('#commabox').val('');
  start();
});

Answer 1

.val(newText) .text(newText), :

$("#commabox").val(newText); //writes newText to textarea

Answer 2

, :

$('document').ready(function() { 
  
  var $textarea = $('#textarea1');
  
  $textarea.attr('data-default-value', $textarea.val());
  
  $('#clear').click(function() {
    $textarea.val($textarea.data('default-value'));
  });
  
});

<textarea id="textarea1">Default value</textarea>

<button id="clear">Clear</button>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Hide result