HTML/TS：別のテキストエリアを作成した後、またはボタンをクリックした後にtextarea textContentが消える

Question

いくつかのテキストエリアを含むHTMLページがありますが、さらにテキストエリアを動的に追加します。​​を使用して、htmlファイルにtextareasを追加します。問題は、新しいテキストエリアを作成するたびに、新しく作成されたテキストエリアがテキストが消えることです。しかし、最初から読み込まれたテキストエリアは消えません。

EDIT：

消失テキストの問題追加ボタンがなくなってプレス。現在の問題は、テキストエリアを追加するボタン以外のボタンをクリックすると、新しく作成されたテキストが消えることです。

これらは、ものにロードされた標準的なものである：[追加]ボタンを2回押した後

：

今、私はいくつかのデータを記入：

だから今私はすべてのテキストエリアを埋めました。次のイメージの問題は、標準のものではなく、テキストをクリックした後に消えることです追加ボタン：

ボタンをクリックするとテキストも消えます。 htmlとTSファイルは以下の通りです：

の.html：

.TS：

addField(){ 
    document.getElementById("textAreas").innerHTML += '<textarea class="textArea"></textarea>'; 
    } 

saveAsDraft(){ 
    this.paramReport.isFinal = false; 
    this.saveAndSend(); 
    } 

    saveAsFinal(){ 
    this.paramReport.isFinal = true; 
    this.saveAndSend(); 
    } 

    saveAndSend(){ 
    var textAreaList = document.getElementsByClassName("textArea"); 
    this.paramReport.notes = []; 
    for (let i = 0; i < textAreaList.length; i++) { 
     //console.log(textAreaList[i].textContent); 
     this.paramReport.notes.push(textAreaList[i].textContent); 
    } 
    let status: string; 
    if (this.paramReport.isFinal) status = "FINAL"; else status = "DRAFT"; 
    this.reportsProvider.editReportFromList(this.paramReport); 
    this.toastCtrl.create({ 
     message: 'Submitted report with id: ' + this.paramReport.id 
     + ' made by ' + this.paramReport.submittedBy + ' as ' + status, 
     duration: 2000, 
     position: 'top' 
    }).present(); 
    this.navCtrl.push(ReportOverviewPage); 
    } 

Answer 1

持っている現在の方法で、あなたは全体のDOMノードを削除しているので、テキストが消えます新しいテキスト領域で再レンダリングします。代わりにdocument.createElement APIを使用する必要があります。

var textarea= document.createElement("textarea"); 
textarea.className = "textArea"; 
document.getElementById("textAreas").appendChild(textarea);