我正在嘗試制作一個可以多次使用的提交表單，其中顯示彼此相鄰提交的單詞。到目前為止，我已經能夠完成提交表單，當按下提交按鈕時，顯示該單詞，但是當提交表單填寫另一個單詞并重新提交時，它會接管顯示的前一個單詞。這是我的代碼：
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>我環顧四周，但我能找到的只是“多個提交按鈕”解決方案，這不是我想要的。任何幫助將不勝感激。
uj5u.com熱心網友回復：
為此，您需要有一個可以存盤所有值的中間變數：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/334084.html
標籤：javascript html css