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>

Answer 2

You can make it easier :

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>

Answer 3

You can try this approach.

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>