Estoy tratando de crear un formulario de envío que se pueda usar varias veces, que muestre las palabras que se envían una al lado de la otra. Hasta ahora he podido hacer el formulario de envío y cuando se presiona el botón Enviar, se muestra la palabra, pero cuando el formulario de envío se llena con otra palabra y se vuelve a enviar, toma el lugar de la palabra anterior que se mostró. Aquí está mi código:
function showTag(){ document.getElementById('display').innerHTML = document.getElementById("user_input").value; } <form> <input type="text" name="message" id="user_input"> </form> <input type="submit" onclick="showTag()"> <p><span class="tag is-info" style="background-color:#33475b;color:white;" id='display'></span></p>He buscado, pero todo lo que he podido encontrar son soluciones de "múltiples botones de envío", que no es lo que estoy buscando. Cualquier ayuda será muy apreciada.
Para eso necesitas tener una variable intermediaria que pueda almacenar todos los valores:
const arr = []; function showTag() { arr.push(document.getElementById("user_input").value) document.getElementById('display').innerHTML = arr.join(' ') } <form> <input type="text" name="message" id="user_input"> </form> <input type="submit" onclick="showTag()"> <p><span class="tag is-info" style="background-color:#33475b;color:white;" id='display'></span></p>Editar: para que cada envío del usuario se convierta en un nuevo elemento, aún necesitará la matriz para almacenar los datos del usuario, pero en lugar de unirse a la matriz, debe crear un nuevo elemento con el último elemento de la matriz:
const arr = []; function showTag(e) { arr.push(document.getElementById("user_input").value) phrase = document.createElement('p'); phrase.innerHTML = arr.at(-1); document.getElementById('phrases').appendChild(phrase); } p { width: fit-content; background-color: #33475b; color: white; } <form> <input type="text" name="message" id="user_input"> </form> <input type="submit" onclick="showTag()"> <div id='phrases'></div>