在下一行打印输入值，依此类推

Question

问题：我已经写了一个代码，但它只打印一次值，我想在旧值上逐行打印值，就像post ok吗？

var post = []
function getVal() {
// creating varable val for select all input data.
const val = document.querySelector('input').value;
document.getElementById('input').value = "";
console.log(val);
//store data in an array for print.
post.push(val)
//call for print the input value in span tag
document.getElementById('print1').innerHTML = val
console.log(post);
}

<input id="input" class="inp" type="text" name="textbox">
<button id="btn" class="postbutton" type="button" name="button" onclick="getVal()">Post</button>
<span id="print1"></span>

Answer 1

您可以尝试使用join，只需调整一行代码

更换

document.getElementById('print1').innerHTML = val

带有

document.getElementById('print1').innerHTML = post.join('<br/>');

var post = []
function getVal() {
// creating varable val for select all input data.
const val = document.querySelector('input').value;
document.getElementById('input').value = "";
//store data in an array for print.
post.push(val)
//call for print the input value in span tag
document.getElementById('print1').innerHTML = post.join('<br/>');
}

<input id="input" class="inp" type="text" name="textbox">
<button id="btn" class="postbutton" type="button" name="button" onclick="getVal()">Post</button>
<br/>
<span id="print1"></span>

Answer 2

替换下面的函数行getVal((

document.getElementById('print1').innerHTML = val

带

document.getElementById('print1').innerHTML += val + "<br>"

var post = []
function getVal() {
// creating varable val for select all input data.
const val = document.querySelector('input').value;
document.getElementById('input').value = "";
console.log(val);

//store data in an array for print.
post.push(val)
//call for print the input value in span tag
document.getElementById('print1').innerHTML += val + "<br>"
console.log(post);
}

<input id="input" class="inp" type="text" name="textbox">
<button id="btn" class="postbutton" type="button" name="button" onclick="getVal()">Post</button>
<span id="print1"></span>