Rendering the Text input message at button click

Question

I am a complete beginner and asking question here for the first time.

I am trying to render a text that user puts in the textfield, and want it to show below my title. Below is my code, what's the problem with this?

<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>

---

My 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

Please Help !!

Answer 1

You need to move your message history code inside click event function. also you forgot to use correct array

just change your function to

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
})

Running example

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>