如何显示来自同一提交表单的多个单词?

Question

我正在尝试制作一个可以多次使用的提交表单，其中显示了彼此相邻提交的单词。到目前为止，我已经能够完成提交表单，并且当按下提交按钮时，显示单词，但是当提交表单中填充了另一个单词并重新提交时，它将接管之前显示的单词。下面是我的代码:

function showTag(){
document.getElementById('display').innerHTML = 
document.getElementById("user_input").value;
}

<form>
<input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showTag()">
<p><span class="tag is-info" style="background-color:#33475b;color:white;" id='display'></span></p>

我四处看了看，但我能找到的都是"多个提交按钮"。解决方案，这不是我想要的。如有任何帮助，我将不胜感激。

Answer 1

为此，您需要有一个可以存储所有值的中间变量:

const arr = [];
function showTag() {
arr.push(document.getElementById("user_input").value)
document.getElementById('display').innerHTML = arr.join(' ')
}

<form>
<input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showTag()">
<p><span class="tag is-info" style="background-color:#33475b;color:white;" id='display'></span></p>

编辑:对于来自用户的每个提交都成为一个新元素，您仍然需要数组来存储来自用户的数据，但不是加入数组，而是必须使用数组中的最后一项创建一个新元素:

const arr = [];
function showTag(e) {
arr.push(document.getElementById("user_input").value)
phrase = document.createElement('p');
phrase.innerHTML = arr.at(-1);
document.getElementById('phrases').appendChild(phrase);

}

p {
width: fit-content;
background-color: #33475b;
color: white;
}

<form>
<input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showTag()">
<div id='phrases'></div>