Quiero crear dos matrices a partir de la entrada del usuario mientras llamo a una función. El problema es que obtengo un valor adicional en la matriz que no ingresé; parece un valor predeterminado...
Tengo el siguiente código:
const NameArr = []; const IdArr = []; function getName() { const Input = document.getElementById("input").value; const list_names = Input.split(", "); for (let i of list_names) { NameArr.push(i); IdArr.push(i); }; console.log(NameArr, IdArr); return NameArr, IdArr; }; getName(); <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <script src="main.js" charset="utf-8" defer></script> <title></title> </head> <body> <form id="form" action="#" method="post"> <input type="text" id="input"> <button onclick="getName();">Get Data</button> </form> </body> </html> No estoy seguro de por qué obtengo un valor extra [""] en mis arreglos...
Estás llamando a getName() al final de tu código.
Dentro de getName está obteniendo el valor de su campo de entrada que inicialmente es la cadena vacía ""
const Input = document.getElementById("input").value;
Luego, está utilizando el método push () que empujará la cadena vacía al principio y ahora este es el contenido de su matriz
[""]Más tarde, cuando agregue otros valores y llame a getName(), agregará los valores encima del valor ya existente
[""]Respuesta basada en los comentarios.
la llamada de función getName() al final del script llama a la función justo después, incluso cuando el usuario no ha presionado el button . Por lo tanto, agrega el valor vacío en la matriz ya que hay un valor vacío.
Solo necesita eliminar getName() .
const NameArr = []; const IdArr = []; Dict = {}; function getName() { const Input = document.getElementById("input").value; const list_names = Input.split(", "); for (let i of list_names) { NameArr.push(i); IdArr.push(i); }; console.log(NameArr, IdArr); }; <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <script src="main.js" charset="utf-8" defer></script> <title></title> </head> <body> <form id="form" action="#" method="post"> <input type="text" id="input"> <button onclick="getName();">Get Data</button> </form> </body> </html>