Tengo problemas para poder agregar datos de entrada del usuario. Puedo hacer que funcione cuando agrego los datos yo mismo, todos los usuarios aparecen en la consola en la matriz. Para las personas 1-3, me gustaría que ingresen su nombre y color favorito, pero parece que no puedo almacenarlo o al menos hacer que aparezca en la consola. Eliminé a las personas 2 y 3 de la matriz para poder probarlo más fácil y rápido. si fueras a tomar el
user: document.getElementById('name').value, color: document.getElementById('color').value,y todos los comentarios funcionarían y se mostrarían en la consola como quiero, pero parece que no puedo hacer datos de usuario. Lo siento si esto es confuso, soy nuevo en javascript.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <div class="formBox"> <label for="name">Name</label> <input type="text" id="name" placeholder="Name"/> </div> <div class="formBox"> <label for="color">Favorite color</label> <input type="text" id="color" placeholder="Color"/> </div> <div class="formBox"> <button id="btn">Click to Add</button> </div> <div id="msg"> <pre></pre> </div> </form> <script > const person1 = { user: document.getElementById('name').value, color: document.getElementById('color').value, /* user: "Sarah", color: "Yellow",*/ }; /* const person2 = { user: "Aaron", color: "Yellow" }; const person3 = { user: "Sarah", color: "Green", }; */ array = [person1] sort = array.sort(function(a, b){ if(a.user < b.user) { return -1; } if(a.user > b.user) { return 1; } return 0; }) console.log(sort) </script> </body> </html>Le doy un código que coincide con su propósito, pero le recomiendo que encuentre un curso que cree un proyecto completo, que pueda ayudarlo a comprender cómo usar los conceptos básicos para construir algunas cosas complejas.
// Declare Part const users = []; const form = document.getElementById("myForm"); // 1. Add Event Listener to our form // when form submits the function get called form.addEventListener("submit", (event) => { // Stop form from refreshing the page event.preventDefault(); // Get name field value const userName = document.getElementById("name").value; // Get color field value const userColor = document.getElementById("color").value; // Create new person const person = { user: userName, color: userColor, }; // Store new person (Add new person to array of users) users.push(person); // Now we sort our users users.sort(function(a, b) { if (a.user < b.user) { return -1; } if (a.user > b.user) { return 1; } return 0; }); // See the result console.log(users); }); <form id="myForm"> <div class="formBox"> <label for="name">Name</label> <input type="text" id="name" placeholder="Name" /> </div> <div class="formBox"> <label for="color">Favorite color</label> <input type="text" id="color" placeholder="Color" /> </div> <div class="formBox"> <button id="btn">Click to Add</button> </div> <div id="msg"> <pre></pre> </div> </form>El javascript en su código se ejecuta de principio a fin cada vez que actualiza la página y cuando hace clic en el click to add , está enviando el formulario, que actualiza automáticamente la página. Puede hacer un par de ajustes en su código para arreglar esto...
Puede agregar type="button" como una propiedad de su botón para decirle al navegador que este es un botón y no una forma de enviar su formulario. Al hacer esto, su página no se actualizará cuando haga clic en ella.
Desea que su código javascript se ejecute cuando haga clic en el botón, no cuando se cargue la página. Para hacer esto, debe envolverlo en una función y agregar un controlador onclick a su botón que ejecuta la función cuando se hace clic en el botón. Notará que la matriz se inicializa fuera de la función, esto se debe a que queremos que la matriz se inicialice cuando carga la página, y no cuando se hace clic en el botón, de lo contrario estaríamos sobrescribiendo la matriz cada vez que agregamos algo a eso.
const array = [] const addUser = () => { const person1 = { user: document.getElementById('name').value, color: document.getElementById('color').value, }; array.push(person1) sort = array.sort(function(a, b){ if(a.user < b.user) { return -1; } if(a.user > b.user) { return 1; } return 0; }) console.log(sort) } <form> <div class="formBox"> <label for="name">Name</label> <input type="text" id="name" placeholder="Name"/> </div> <div class="formBox"> <label for="color">Favorite color</label> <input type="text" id="color" placeholder="Color"/> </div> <div class="formBox"> <button id="btn" type="button" onclick="addUser(this)" >Click to Add</button> </div> <div id="msg"> <pre></pre> </div> </form>