Estoy tratando de llenar una matriz de Javascript en blanco con nombres de usuario ingresados desde un solo campo de entrada HTML (ejemplo de entrada: bill, bob, jim) pero no puedo hacer que funcione de la manera que quiero. El código HTML que estoy usando es:
<input id="users" type="text" placeholder="Enter Users"> <button class="btn" onclick="addTo()">Click to add names</button>Y el JavaScript que tengo hasta ahora es
let myarray = [] function addTo() { myarray.push(document.getElementById("users").value) }Los datos ingresados se envían a la matriz, pero se completan como 1 solo elemento
['bill, bob, jim']pero lo que quiero es que se envíe como 3 elementos separados para poder acceder a ellos a través del índice, como myarray[1]
['bill', 'bob', 'jim']¿Alguien sabe cómo puedo cambiar el código para lograr esto? Todos los nombres deben ingresarse a través del campo de entrada HTML único.
Usar:
myarray.push(...document.getElementById("users").value.split(','))La parte que falta es: dividir la cadena capturada.
Adopte la función EventTarget.addEventListener para vincular un evento a un elemento en el DOM.
const myarray = [], userInput = document.querySelector("#users"); document.querySelector("#btn").addEventListener("click", (e) => { e.preventDefault(); myarray.push(...userInput.value.split(",").map(s => s.trim())); console.log(myarray); }); <input id="users" type="text" placeholder="Enter Users"> <button id="btn" class="btn">Click to add names</button>Observaciones :
Click to add names ?Según la consideración de los dos puntos anteriores. Aquí está la demostración :
let myarray = [] function addTo() { myarray.push(...document.getElementById("users").value.split(',')); console.log([...new Set(myarray)]); } <input id="users" type="text" placeholder="Enter Users"> <button class="btn" onclick="addTo()">Click to add names</button>