0

with the following example I try to write the text on a new line with every auto. repetition. I thought that's going to be "\ n" but I'm not succeeding. Can someone help? Thank you very much!!

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();
}  

ClearElement.onclick = function clearText() {  
textareaStatus.value = '';
}
<button id="WriteElement" onclick="WriteElement()">Record</button>
<button id="StopElement" onclick="StopElement()" >Stop</button>
<button id="ClearElement" onclick="ClearElement()">Clear</button>
JaDoLo
  • 111
  • 9
  • If you are trying to duplicate lines you need to concatenate the existing value to added text. Your timer just keeps setting the same value each time. Still not very clear what you are expecting here – charlietfl Nov 19 '17 at 22:40
  • You have several problems with your code. See my answer for corrections and a fully working solution. – Scott Marcus Nov 19 '17 at 22:51
  • ***@charlietfl*** It's just about the line break itself. In the example, it's just a single string of numbers. In my application, however, each line has different values, so that makes the whole sense. It is in the application to the recording of control data that transmitted. – JaDoLo Nov 23 '17 at 07:15

2 Answers2

1

Change textareaStatus.value = text; to 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();
}  

ClearElement.onclick = function clearText() {  
textareaStatus.value = '';
}
<button id="WriteElement" onclick="WriteElement()">Record</button>
<button id="StopElement" onclick="StopElement()" >Stop</button>
<button id="ClearElement" onclick="ClearElement()">Clear</button>
Vijaya Pandey
  • 4,252
  • 5
  • 32
  • 57
1

\n does work, but you are clearing out the textarea upon each new call of your function so you never see the second set of data added. Changing:

textareaStatus.value = text;

to:

textareaStatus.value += text;

Solves that issue.

You also didn't have a variable reference to your setTimeout timer, so your clearTimeout() call would never work.

And, you have an elements and functions with the same names, which is not a good idea. Also, in JavaScript, identifiers are generally written in "camelCase". "PascalCase" is generally reserved for "constructor functions".

Additionally, you should not be setting up event handlers with HTML event attributes (onclick, etc.). That is how it was done 100 years ago and there are many reasons to never do it today. Instead use modern standards and separate your HTML from your JavaScript.

One last thing, you don't need to be styling your textarea in JavaScript. Everything you are setting can and should be done in CSS.

Changing these things so that the code is correct, you can see the \n works just fine (read the comments for each explanation);

// 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
}  

function clearText() {  
  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>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71