Javascript print() метод не работает

Question

У меня есть простая программа, которая хранит объекты-ученики в массиве, а затем печатает информацию о студентах на веб-странице. У меня есть метод печати в моей программе, который принимает параметр и получает доступ к элементу div, а затем устанавливает элементы inner html в параметр, переданный для печати сообщения. Пожалуйста, рассмотрите фрагмент кода, чтобы увидеть, где метод document.write работает отлично, но не метод печати.

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

Он работает просто отлично вам просто нужно уважать текст в настоящее время в делах.

Я добавил += к вызову 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

Это потому, что ваш метод печати заменяет всю 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>