テキストエリアで改行を行うには？

Question

次の例では、すべてのautoで新しい行にテキストを書き込もうとしています。繰り返し。私はそれが "\ n"になると思ったが、私は成功していない。助けてもらえますか？どうもありがとうございました！！ textareaStatus.value += text;へ

textareaStatus = document.body.appendChild(document.createElement('textarea')); 
 
textareaStatus.style.cssText = 'display: block; font-size:small; width: ' + 0.95 * window.innerWidth + 'px; ' + 'color: black; ' + 'background:#ffffff '; 
 
textareaStatus.rows = 5; 
 
textareaStatus.value = ''; 
 

 
    
 

 
WriteElement.onclick = function writeText() { 
 
var text = ("123" +" "+ "123" +" "+ "123" +" "+ "123" +" "+ "123" +" "+ "123" + "\n").toString();  
 
     
 
setTimeout(function(){ 
 
document.getElementById("WriteElement").click(); 
 
}, 1000);  
 
     
 
textareaStatus.value = text; 
 
} 
 
    
 
StopElement.onclick =function stopText() { 
 
clearTimeout(); 
 
} \t \t 
 

 
ClearElement.onclick = function clearText() { \t \t 
 
textareaStatus.value = ''; 
 
}

<button id="WriteElement" onclick="WriteElement()">Record</button> 
 
<button id="StopElement" onclick="StopElement()" >Stop</button> 
 
<button id="ClearElement" onclick="ClearElement()">Clear</button>

Answer 1

\n作業を行いますが、あなたはそうあなたの関数のそれぞれの新しいコール時にテキストエリアをクリアしていますあなたは秒を見ないデータの追加されたセット。変更：

textareaStatus.value = text; 

へ：

textareaStatus.value += text; 

すると、その問題を解決します。

また、setTimeoutタイマーへの可変参照がないため、clearTimeout()コールは決して動作しません。

そして、同じ名前の要素と機能がありますが、これは良い考えではありません。また、JavaScriptでは、識別子は通常 "camelCase"で記述されます。 「PascalCase」は、一般に「コンストラクタ関数」用に予約されています。

さらに、HTMLイベント属性（onclickなど）でイベントハンドラを設定しないでください。これは100年前のことでしたが、今日はmany reasons to never do itです。代わりに、現代の標準を使用し、JavaScriptとHTMLを分離します。

最後に、JavaScriptでテキストエリアをスタイリングする必要はありません。あなたが設定していることはすべてCSSで行うことができます。

コードが正しくなるように変更すると、\nがうまく機能することがわかります（各説明のコメントを読んでください）。

// Get the DOM references you will need just once: 
 
var btnWrite = document.getElementById("writeElement"); 
 
var btnStop = document.getElementById("stopElement"); 
 
var btnClear = document.getElementById("clearElement"); 
 

 
// Set up event handling the modern, standards-based way: 
 
btnWrite.addEventListener("click", writeData); 
 
btnStop.addEventListener("click", stopText); 
 
btnClear.addEventListener("click", clearText); 
 

 
textareaStatus = document.body.appendChild(document.createElement('textarea')); 
 

 
var timer = null; // need variable to reference timer 
 

 
function writeData() { 
 
    var text = "123 ".repeat(6) + "\n"; // Much simpler way to set up your string 
 
    timer = setTimeout(writeData, 1000); // Assign a variable to all timers so they can be accessed later 
 
    textareaStatus.value += text;  // Use += to append a new value on to an existing one 
 
} 
 
    
 
function stopText() { 
 
    clearTimeout(timer); // You must pass a reference to the timer you want cleared 
 
} \t \t 
 

 
function clearText() { \t \t 
 
    textareaStatus.value = ''; 
 
}

/* Try to do all your styling in CSS */ 
 
textarea { 
 
    display: block; 
 
    font-size:small; 
 
    width:95vw; /* vw is viewport width and the number you use is a percentage of it */ 
 
    height:5em; /* 1em === 100% of the inherited font size */ 
 
}

<button id="writeElement">Record</button> 
 
<button id="stopElement">Stop</button> 
 
<button id="clearElement">Clear</button>

Answer 2

変更textareaStatus.value = text;：

textareaStatus = document.body.appendChild(document.createElement('textarea')); 
 
textareaStatus.style.cssText = 'display: block; font-size:small; width: ' + 0.95 * window.innerWidth + 'px; ' + 'color: black; ' + 'background:#ffffff '; 
 
textareaStatus.rows = 5; 
 
textareaStatus.value = ''; 
 

 

 
WriteElement.onclick = function writeText() { 
 
var text = ("123" +" "+ "123" +" "+ "123" +" "+ "123" +" "+ "123" +" "+ "123" + "\n").toString();  
 
     
 
setTimeout(function(){ 
 
document.getElementById("WriteElement").click(); 
 
}, 1000);  
 
     
 
textareaStatus.value += text; 
 
} 
 
    
 
StopElement.onclick =function stopText() { 
 
clearTimeout(); 
 
} \t \t 
 

 
ClearElement.onclick = function clearText() { \t \t 
 
textareaStatus.value = ''; 
 
}

<button id="WriteElement" onclick="WriteElement()">Record</button> 
 
<button id="StopElement" onclick="StopElement()" >Stop</button> 
 
<button id="ClearElement" onclick="ClearElement()">Clear</button>