Soy un principiante completo y hago una pregunta aquí por primera vez.
Estoy tratando de representar un texto que el usuario coloca en el campo de texto y quiero que se muestre debajo de mi título. A continuación se muestra mi código, ¿cuál es el problema con esto?
<div class="container"> <h1>I want to pass this message to all:</h1> <input type="text" id="msg-text" size="100%"> <button id="msg-button">Click to Save</button> <h2 class="save-title">Save the Message Below:</h2> <p id="save-msg"></p> </div> <script type="text/javascript" href="script.js"></script>Mi JavaScript:
let myMessage = [] const msgTextEl = document.getElementById("msg-text") const msgButtonEl = document.getElementById("msg-button") const saveMsgEl = document.getElementById("save-msg") msgButtonEl.addEventListener("click", function(){ myMessage.push(msgTextEl.value) msgTextEl.value = "" }) let messageList = "" for (let i = 0; i < msgTextEl.length; i++){ messageList += "<li>" + myMessage[i] + "</li>" } saveMsgEl.innerHTML = messageListPor favor ayuda !!
Debe mover su código de historial de mensajes dentro de la función de evento de clic. también olvidaste usar la matriz correcta
simplemente cambie su función a
let myMessage = [] const msgTextEl = document.getElementById("msg-text") const msgButtonEl = document.getElementById("msg-button") const saveMsgEl = document.getElementById("save-msg") msgButtonEl.addEventListener("click", function(){ myMessage.push(msgTextEl.value) msgTextEl.value = "" //using myMessage array instead of msgTextEl let messageList = "" for (let i = 0; i < myMessage.length; i++){ messageList += "<li>" + myMessage[i] + "</li>" } saveMsgEl.innerHTML = messageList })Ejemplo de ejecución
let myMessage = [] const msgTextEl = document.getElementById("msg-text") const msgButtonEl = document.getElementById("msg-button") const saveMsgEl = document.getElementById("save-msg") msgButtonEl.addEventListener("click", function(){ myMessage.push(msgTextEl.value) msgTextEl.value = "" //using myMessage array instead of msgTextEl let messageList = "" for (let i = 0; i < myMessage.length; i++){ messageList += "<li>" + myMessage[i] + "</li>" } saveMsgEl.innerHTML = messageList }) <div class="container"> <h1>I want to pass this message to all:</h1> <input type="text" id="msg-text" size="100%"> <button id="msg-button">Click to Save</button> <h2 class="save-title">Save the Message Below:</h2> <p id="save-msg"></p> </div> <script type="text/javascript" src="script.js"></script>Puedes hacerlo más fácil:
const msgTextEl = document.getElementById("msg-text") const msgButtonEl = document.getElementById("msg-button") const saveMsgEl = document.getElementById("save-msg") // EVENT ON CLICK msgButtonEl.addEventListener("click", function(){ // CREATE A NODE AND APPEND TO SAVE-MSG let tmpMsg = document.createElement('li') tmpMsg.textContent = msgTextEl.value; saveMsgEl.appendChild(tmpMsg) }) <div class="container"> <h1>I want to pass this message to all:</h1> <input type="text" id="msg-text" size="100%"> <button id="msg-button">Click to Save</button> <h2 class="save-title">Save the Message Below:</h2> <p id="save-msg"></p> </div>Puedes probar este enfoque.
let btn = document.getElementById('msg-button'); let container = document.getElementById('save-msg'); btn.addEventListener('click', function() { let inputData = document.getElementById('msg-text').value; let newElement = document.createElement('p'); newElement.innerHTML = inputData; container.appendChild(newElement); container.insertAdjacentHTML('beforeend', '<br />'); }); <div id="container"> <h1>I want to pass this message to all:</h1> <input type="text" id="msg-text" size="100%"> <button id="msg-button">Click to Save</button> <h2 class="save-title">Save the Message Below:</h2> <p id="save-msg"></p </div>