Making array with input of textarea

Question

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?

how do you seperate the lines? Are you pressing enter or do you mean the "normal" break when the line is full? — Ma G.
– Ma G., Commented Feb 25, 2022 at 11:43
<input type="submit"> without a <form> doesn't make much sense. The var ... lines have to be in the won() function because you (most likely) need the content when that function is executed not when the DOM is parsed. — Andreas
– Andreas, Commented Feb 25, 2022 at 11:47
@Andreas the function is on the button. I've changed the code now. And the variables are getting declared globally so they're still accessible. — Wagyu
– Wagyu, Commented Feb 25, 2022 at 11:53
"And the variables are getting declared globally so they're still accessible." - Which makes no sense (...with this example. There might be a reason, but there's almost always a better way then global variables) and is the source of your problem. At least var lines = area.value.split("\n"); has to be in won() to get the current content of the <textarea> — Andreas
– Andreas, Commented Feb 25, 2022 at 11:56

Lawrence Cherone · Accepted Answer · 2022-02-25 12:37:31Z

With your snippet, you're grabbing the value onload 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>

Abhijeet Vadera · Accepted Answer · 2022-02-25 12:50:37Z

0

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

answered Feb 25, 2022 at 12:50

Abhijeet Vadera

5703 silver badges7 bronze badges

Collectives™ on Stack Overflow

Making array with input of textarea

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related