0
147
ViewsCómo agregar una clase html en la función javascript
Estoy tratando de crear una función que agregue un usuario en javascript.
Aquí están mis fragmentos de código del archivo js y el archivo html:
function input() { document.getElementById("name").style.visibility = "visible"; document.getElementById("id").style.visibility = "visible"; document.getElementById("number").style.visibility = "visible"; document.getElementById("search").style.visibility = "visible"; } function addUser(list) { var text = ""; var inputs = document.querySelectorAll("input[type=text]"); for (var i = 0; i < inputs.length; i++) { text += inputs[i].value; } var list = document.createElement("div"); var node = document.createTextNode(text); list.appendChild(node); document.getElementById("usersList").appendChild(list); } <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="contact-container"> <div class="navbar"> <ul id="menuList"> <li> <img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png"/> </li> <li>View</li> <li onclick="input()"> Add </li> </ul> </div> <div class="users"> <input type="text" id="name" placeholder="Name"/> <input type="text" id="id" placeholder="Id"/> <input type="text" id="number" placeholder="Number"/> <button type="submit" id="search" onclick="addUser()"> <svg...> </svg> </button> <div id="usersList"></div> </div> </div> </body> </html>Aquí está mi proyecto:
¡¡¡¡¡¡Muchas gracias!!!!!!
·
Juan Pablo Isaza
1 answers
Answer question0
Coloque saltos de línea entre cada valor de las entradas y establezca el estilo del DIV en white-space: pre .
function input() { document.getElementById("name").style.visibility = "visible"; document.getElementById("id").style.visibility = "visible"; document.getElementById("number").style.visibility = "visible"; document.getElementById("search").style.visibility = "visible"; } function addUser(list) { var text = ""; var inputs = document.querySelectorAll("input[type=text]"); for (var i = 0; i < inputs.length; i++) { text += inputs[i].value + '\n'; } var list = document.createElement("div"); var node = document.createTextNode(text); list.appendChild(node); document.getElementById("usersList").appendChild(list); } #usersList div { white-space: pre; } <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="contact-container"> <div class="navbar"> <ul id="menuList"> <li> <img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png"/> </li> <li>View</li> <li onclick="input()"> Add </li> </ul> </div> <div class="users"> <input type="text" id="name" placeholder="Name"/> <input type="text" id="id" placeholder="Id"/> <input type="text" id="number" placeholder="Number"/> <button type="submit" id="search" onclick="addUser()"> <svg...> </svg> </button> <div id="usersList"></div> </div> </div> </body> </html>
·
Juan Pablo Isaza
Report
Answer question