mit val ('') um ein Textfeld zu löschen

Question

Ich stelle einige Standardinhalte in eine mit jquery, aber dann versuchen, eine Schaltfläche zu implementieren, um neue benutzerdefinierte Ergänzungen an der <textarea> durch Zurücksetzen auf das Original zu löschen. Ich habe versucht mit .val('') ausgelöst durch eine jquery Klick-Funktion, um die <textarea> vor dem Neustart des Codes wieder zu löschen, aber aus irgendeinem Grund bleibt die <textarea> leer, nachdem ich versuche, zurücksetzen (funktioniert finden das erste Mal durch). Kann das nicht herausfinden!

Der Code ist etwas, an dem ich arbeite, um korrekte Komma-Verwendung in einem Englischunterricht zu lehren. Die Arbeit an es hier: 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

Verwenden .val(newText) statt .text(newText) den Text des Textfeldes zu setzen:

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

Answer 2

Das hier sollte genug sein für das, was Sie versuchen zu erreichen:

$('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>