print input value on the next line and so on

user_17809778 0
Viewed 393

Question:- i have write a code but it print values only once and i want to print value line by line nextupon the old value like a 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>

user-input printing text javascript
2 Answers

Replace the following line of function getVal()

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

With

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>

user_63846160

You can try using join , just adjust one line of code

replace

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

with

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>

user_127096130
Related