Making array with input of textarea-CodePudding

I'm trying to capture the input of a textarea and converting it to an array but it is reading the whole input as one element and making array of length 1.

<html>
<textarea id="area"></textarea>
<input type="submit" onclick="won()">
<p id="one" style="display: none;"></p>
</html>

The js part displays a message of the length of the array.

var area = document.getElementById("area");
var lines = area.value.split("\n");
var pa = document.getElementById("one");

function won() {
  pa.style.display = "block";
  pa.innerHTML = lines.length;
}

What I'm trying to achieve with the whole thing is that. The multi line input is to be converted into an array with each new line being a new element. Then I loop through the array and if even one element doesn't pass a validation function, an exception message is displayed under the texarea.

Can someone kindly help me with this?

CodePudding user response：

With your snippet, you're grabbing the value onl oad so it would be empty, it should be in the event where you grab the value. Also avoid inline event triggering, add the event via js.

var area = document.getElementById("area");
var button = document.getElementById("btn-submit");
var one = document.getElementById("one");

button.addEventListener('click', () => {
  // get value
  var lines = area.value.split("\n");

  one.style.display = "block";
  one.innerHTML = lines.length;
})

<textarea id="area"></textarea>
<button type="button" id="btn-submit">Submit</button>
<p id="one" style="display: none;"></p>

What I'm trying to achieve with the whole thing is that. The multi line input is to be converted into an array with each new line being a new element. Then I loop through the array and if even one element doesn't pass a validation function, an exception message is displayed under the texarea.

const area = document.getElementById("area");
const button = document.getElementById("btn-submit");
const error = document.getElementById("error");
const items = document.getElementById("items");

button.addEventListener('click', () => {
  
  // get textarea value, remove emptys
  const lines = area.value.split("\n").filter(Boolean);

  // reset error and items dom
  error.innerHTML = items.innerHTML = ''
  
  // do your validation, could loop or use .some(), .includes()
  if (!lines.length) {
    error.innerHTML = 'Enter at least one item'
  } else if (!lines.includes('cat')) {
    error.innerHTML = 'Entered lines should include at least one cat'
  } else {
    // no errors
    items.innerHTML = `${lines.length} items<br><ul><li>${lines.join('</li><li>')}</li></ul>`
  }
})

<textarea id="area"></textarea>
<button type="button" id="btn-submit">Submit</button>
<div id="error"></div>
<div id="items"></div>

CodePudding user response：

Simply put your line var lines = area.value.split("\n"); under the won function like below and you will get your total lines.

Example

var area = document.getElementById("area");
var pa = document.getElementById("one");

function won() {
  var lines = area.value.split("\n");
  pa.style.display = "block";
  pa.innerHTML = lines.length;
}

You can check it here too, https://codepen.io/vadera-abhijeet/pen/yLPxLRY