Obtengo un nuevo elemento de matriz de una entrada y lo agrego a la matriz, pero no puedo imprimir todos los elementos en una nueva fila. Puedo imprimir todos los elementos de la matriz en una fila, pero no puedo imprimir todos los elementos en una fila diferente. Estoy usando <br> después del nombre de la matriz, pero no funciona. ¿Cuál es tu solución? Es como un proyecto de lista de tareas pendientes.
var allmembers = [""]; function addnewmember() { var newmemberr = document.getElementById("newmember").value; allmembers.push(newmemberr); for (var i = 0; i < allmembers.length; i++) { document.getElementById("membername").innerHTML = allmembers[i] + "<br>"; } } <html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="stil.css"> </head> <body> <input id="newmember" placeholder="NEW MEMBER"><br> <button type="button" onclick="addnewmember()">SEND</button> <div id="members">MEMBERS</div> <div id="membername"></div> </body> </html>Su solución es agregar un <br> al final de la matriz, en lugar de entre los elementos de la matriz. En lugar de recorrer la matriz, simplemente use el método .join() , que es ideal para algo como esto.
Además, el uso de innerHTML en un bucle es un gran rendimiento "no, no", ya que hace que el navegador tenga que volver a pintar y posiblemente redistribuir el documento DOM repetidamente. En tales casos, debe crear una cadena que contenga el HTML que desea y, una vez que finalice el ciclo, establezca esa cadena como el HTML innerHTML del elemento deseado en un solo comando. Y realmente, el uso de innerHTML debe evitarse en la medida de lo posible debido también a problemas de seguridad .
Ver comentarios adicionales en línea:
let allmembers = []; // Get your DOM references just once, not every time the function runs // Make references to DOM elements, rather than their propreties. This // way, if you decide you need access to a different DOM element property // you don't have to scan for the element again. let newmember = document.getElementById("newmember"); let memberName = document.getElementById("membername"); function addnewmember() { allmembers.push(newmember.value); newmember.value = ""; // Clear out the input // No need for a loop. Just join the arry elements // with a <br> between them. memberName.innerHTML = allmembers.join("<br>"); } <html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="stil.css"> </head> <body> <input id="newmember" placeholder="NEW MEMBER"><br> <button type="button" onclick="addnewmember()">SEND</button> <div id="members">MEMBERS</div> <div id="membername"></div> </body> </html>