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 = messageList
Por 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>