Javascript print()方法无法工作

Question

我有一个简单的程序，将学生对象存储在一个数组中，然后将学生信息打印到网页上。我的程序中有一个print方法，它接受一个参数并访问div元素，然后将元素内部html设置为传递给打印消息的参数。请考虑代码片段，看看document.write方法在哪里工作得很好，而不是print方法。

​

var student;
var message = "";


var students =
    [
      {
        name: "Alice",
        track: "IOS",
        achievements: "Bronze",
        points: 20400
      },
      
      {
        name: "Linda",
        track: "Front End Development",
        achievements: "Silver",
        points: 26000
      }
    ];

  function print( msg )
  {
    var output = document.getElementById("output");
    output.innerHTML = msg;
  
  }

  for( var i = 0; i < students.length; i++)
    {
      student = students[i];
      
      message = "<h2> Student : " + student.name + "</h2>";
      message += "<p> Track : " + student.track + "</p>";
      message += "<p> Achievements : " + student.achievements + "</p>";
      message += "<p> points : " + student.points + "</p>";
   // print(message);
      document.write(message);
      
    }

<div id="output">
  
  </div>

​

Answer 1

它工作得很好，你只需要尊重当前在div中的文本。

我在innerHtml调用中添加了一个innerHtml以附加新文本

​

var student;
var message = "";


var students =
    [
      {
        name: "Alice",
        track: "IOS",
        achievements: "Bronze",
        points: 20400
      },
      
      {
        name: "Linda",
        track: "Front End Development",
        achievements: "Silver",
        points: 26000
      }
    ];

  function print( msg )
  {
    var output = document.getElementById("output");
    output.innerHTML += msg;
  
  }

  for( var i = 0; i < students.length; i++)
    {
      student = students[i];
      
      message = "<h2> Student : " + student.name + "</h2>";
      message += "<p> Track : " + student.track + "</p>";
      message += "<p> Achievements : " + student.achievements + "</p>";
      message += "<p> points : " + student.points + "</p>";
    print(message);
     // document.write(message);
      
    }

<div id="output">
  
  </div>

​

Answer 2

这是因为您的print方法取代了整个output div。因此，循环的每一次迭代都会覆盖前面的输出。

你可以改变：

output.innerHTML = msg;

至：

output.innerHTML += msg;

而且它会正常工作。

Answer 3

在这种情况下，您的print方法每次调用它时都会替换输出的innerHTML。

因此，如果在循环中调用print，则唯一显示的结果将是循环中的最后一项。

如果向该方法添加+，您将得到所需的东西。不过，稍后您需要一个方法来清除div。

​

var student;
var message = "";


var students = [{
    name: "Alice",
    track: "IOS",
    achievements: "Bronze",
    points: 20400
  },

  {
    name: "Linda",
    track: "Front End Development",
    achievements: "Silver",
    points: 26000
  }
];

function print(msg) {
  var output = document.getElementById("output");
  output.innerHTML += msg;

}

for (var i = 0; i < students.length; i++) {
  student = students[i];

  message = "<h2> Student : " + student.name + "</h2>";
  message += "<p> Track : " + student.track + "</p>";
  message += "<p> Achievements : " + student.achievements + "</p>";
  message += "<p> points : " + student.points + "</p>";
  print(message);

}

<div id="output">

</div>

​