0
125
VistasCómo mostrar un nuevo valor de pantalla cuando se hace clic en el botón en javascript
Estoy tratando de crear una página para agregar un nuevo usuario cuando hago clic en un valor en la barra de menú como una opción Agregar que permite a los usuarios ingresar un nombre, un número de oficina y un número de teléfono
Aquí está mi código:
let menu = ["View", "Add", "Verify", "Update", "Delete"]; let list = document.getElementById("menuList"); menu.forEach((item) => { let li = document.createElement("li"); li.innerText = item; list.appendChild(li); }); let users = [ { name: "Jan", id: "1", number: "111-111-111" }, { name: "Juan", id: "2", number: "222-222-222" }, { name: "Margie", id: "3", number: "333-333-333" }, { name: "Sara", id: "4", number: "444-444-444" }, { name: "Tyrell", id: "5", number: "555-555-555" }, ]; var div = "<div class='infor'>"; for (var i = 0; i < users.length; i++) { div += "<div class='user-informations'>"; div += "<p>" + users[i].name + "</p>"; div += "<p>" + users[i].id + "</p>"; div += "<p>" + users[i].number + "</p>"; div += "</div>"; } div += "</div>"; document.getElementById("usersList").innerHTML = div; <div class="contact-container"> <div class="navbar"> <ul id="menuList"> <img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png"/> </ul> </div> <div class="users" id="usersList"> </div> </div>mi proyecto:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Sin prestar atención al estilo o a las buenas prácticas de ingeniería de software:
let usersList = document.getElementById("usersList"), addPage = document.getElementById("addPage"); const users = [ { name: "Jan", id: "1", number: "111-111-111" }, { name: "Juan", id: "2", number: "222-222-222" }, { name: "Margie", id: "3", number: "333-333-333" }, { name: "Sara", id: "4", number: "444-444-444" }, { name: "Tyrell", id: "5", number: "555-555-555" }, ]; function showUsers() { usersList.innerHTML = ""; usersList.style.display = "inline"; addPage.style.display = "none"; users.forEach(u => { const newUser = document.createElement("p"); newUser.innerHTML = `${u.id} ${u.name}<br/>${u.number}`; usersList.appendChild(newUser); }) } function addOn() { usersList.style.display = "none"; addPage.style.display = "inline"; } function addUser() { const id = document.getElementById("id").value; const name = document.getElementById("name").value; const number = document.getElementById("number").value; users.unshift({ name: name, id: id, number: number}); showUsers(); } showUsers(); .navbar { vertical-align: top; padding-right: 1rem; border-right:solid 1px red } <div class="contact-container"> <table> <tr> <td class="navbar"> <ul id="menuList" style="cursor:pointer"> <img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png" /> <li onclick="showUsers()">View</li> <li onclick="addOn()">Add</li> <li>...</li> </ul> </td> <td> <div class="users" id="usersList"></div> <div id="addPage" style="display:none"> Id: <input id="id" size="1"/> Name: <input id="name" /><br/> Number: <input id="number" /><br/> <button onclick="addUser()">Add</button> </div> </td> </tr> </table> </div>No es necesario generar la lista del menú dinámicamente a menos que el menú sea realmente dinámico.
Pregunte si necesita una explicación sobre cualquiera de las cosas anteriores.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta