在单击按钮时呈现文本输入消息

Question

我是一个完全的初学者，第一次在这里提问。

我正在尝试呈现用户在文本字段中输入的文本，并希望它显示在我的标题下方。下面是我的代码，这有什么问题？

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

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

请帮忙!!

Answer 1

您需要将消息历史记录代码移动到点击事件函数中。你也忘了使用正确的数组

只需将您的函数更改为

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

运行例子

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

你可以让它变得更简单:

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

你可以试试这个方法。

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>

在单击按钮时呈现文本输入消息

Rendering the Text input message at button click

javascript

input

text

render