CODEWITHSUNDEEP
javascripthtmlcss
J Akhtar
J Akhtar

Reputation: 667

Javascript print() method not working

I have a simple program that stores student objects in an array and then print the students info to the webpage. I have a print method in my program which takes a parameter and access the div element and then sets elements inner html to the parameter passed to print the message. Please consider the code snippet to see where the document.write method working fine but not the print method.

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>

Upvotes: 0

Views: 73

Answers (3)

William Troy
William Troy

Reputation: 108

In this case, your print method is substituting the innerHTML of output each time you call it.

Therefore, if you call print inside a loop, the only displayed result will be the last item on the loop.

If you add a + to the method, you will get what you want. You will need a method to clear the div later on, though.

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>

Upvotes: 0

Parker
Parker

Reputation: 8851

It's because your print method replaces the entire output div. So each iteration of the loop overwrites the previous ones output.

You can change:
output.innerHTML = msg;
to:
output.innerHTML += msg;
and it will work correctly.

Upvotes: 2

corn3lius
corn3lius

Reputation: 4985

It works just fine you just need to respect the text currently in the div.

I added a += to the innerHtml call to append the new text

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>

Upvotes: 1

Related Questions