Estoy tratando de capturar la entrada de un área de texto y convertirla en una matriz, pero está leyendo toda la entrada como un elemento y creando una matriz de longitud 1.
<html> <textarea id="area"></textarea> <input type="submit" onclick="won()"> <p id="one" style="display: none;"></p> </html>La parte js muestra un mensaje de la longitud de la matriz.
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; }Lo que estoy tratando de lograr con todo esto es eso. La entrada de varias líneas se convertirá en una matriz en la que cada nueva línea será un nuevo elemento. Luego recorro la matriz y si incluso un elemento no pasa una función de validación, se muestra un mensaje de excepción debajo del área texa.
¿Puede alguien amablemente ayudarme con esto?
Con su fragmento, está tomando el valor en carga, por lo que estaría vacío, debería estar en el caso de que tome el valor. También evite la activación de eventos en línea, agregue el evento a través de 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>Lo que estoy tratando de lograr con todo esto es eso. La entrada de varias líneas se convertirá en una matriz en la que cada nueva línea será un nuevo elemento. Luego recorro la matriz y si incluso un elemento no pasa una función de validación, se muestra un mensaje de excepción debajo del área texa.
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>var lines = area.value.split("\n"); bajo la función won como se muestra a continuación y obtendrá el total de sus líneas.Ejemplo
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; }También puede consultarlo aquí, https://codepen.io/vadera-abhijeet/pen/yLPxLRY