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