我需要以表格格式打印数组，并能够添加带有值的新行

Question

I have issue when i press ADD button it does not push value = 0 into array and wouldn't print it out, I'm just getting into coding.

<button id="add">ADD</button>
<p id="demo"></p>

<script>
var fruits, text, fLen, i;
fruits = ["0", "1", "2", "3"];

function myFunction() {
 fruits.push("0");
}

function print() {
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

}

window.onload = print();
document.getElementById("demo").innerHTML = text;
document.getElementById("add").addEventListener("click", myFunction);

</script>

Answer 1

Your code is correct, it pushes new value to array. But your print function that prints array values gets triggered only on window load.

So you should clear the old print, print it again, once you push a new value

  var fruits, text, fLen, i; fruits = ["0", "1", "2", "3"]; function myFunction() { fruits.push("0"); console.log(fruits); print(); } function print() { fLen = fruits.length; text = "<ul id='printed-array'>"; for (i = 0; i < fLen; i++) { text += "<li>" + fruits[i] + "</li>"; } text += "</ul>"; //I have put this line within print() function scope, so it gets updated with new text variable value document.getElementById("demo").innerHTML = text; } window.onload = print(); document.getElementById("add").addEventListener("click", myFunction); 

 <button id="add">ADD</button> <p id="demo"></p> 

Answer 2

var fruits, text, fLen, i;
fruits = ["0", "1", "2", "3"];

function myFunction() {
 fruits.push("0");
 document.getElementById("demo").innerHTML = print(); // added this to get new value doing print 
}

function print() {
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
return text; // also added this to get return;
}

window.onload = print();
document.getElementById("demo").innerHTML = text;
document.getElementById("add").addEventListener("click", myFunction);

Your function was fine except get new value i added return on your print() function to get new value then call it when you push new value

Answer 3

You're pushing the value but not printing it. You need to call the print() method after pushing the value and change the innerHTML.

Your function should be

function myFunction() {
 fruits.push("0");
 print();
 document.getElementById("demo").innerHTML = text;
}

Fiddle: https://jsfiddle.net/Lgkzsy41/

Answer 4

var fruits, fLen, i;
fruits = ["0", "1", "2", "3"];

function myFunction() {
 fruits.push("0");
 print();
}

function print() {
   var text='<ul>';
   fLen = fruits.length;            
   for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
   }   
   text += '</ul>'
   document.getElementById("demo").innerHTML = text;
}

window.onload = print();
document.getElementById("add").addEventListener("click", myFunction);

Complete example jsfiddle