Why does JavaScript prints only the last value to document using document.querySelector or by getElement methods?

Question

I'm confused why array of objects looped only returns one value (one for the truthy and one for the falsey) while using document methods (querySelector methods and getElement methods). Where as, I suppose to expect every object to return.

Here is the script:

let movies = [
  {
    title: "Spider-Man: No Way Home",
    rating: 3.5,
    hasWatched: true
  },

  {
    title: "Unbroken",
    rating: 5,
    hasWatched: true
  },

  {
    title: "Frozen 2",
    rating: 5,
    hasWatched: false
  },

  {
    title: "Encanto",
    rating: 5,
    hasWatched: false
  },

  {
    title: "Forrest Gump",
    rating: 5,
    hasWatched: true
  }
];

 printWatched = document.querySelector(".moviesWatched");
const printNotWatched = document.querySelector(".moviesNotWatched");

for (let i = 0; movies.length > i; i++) {
  if(movies[i].hasWatched === true) {
    printWatched.textContent = "You have watched " + '"' + movies[i].title + '"' + " - " + movies[i].rating + " stars";
} else {
    printNotWatched.textContent = "You have not seen " + '"' + movies[i].title + '"' + " - " + movies[i].rating + " stars";
  }
}

But, if I use document.write everything is nominal, working and returns every value inside of the array of objects...

let movies = [
  {
    title: "Spider-Man: No Way Home",
    rating: 3.5,
    hasWatched: true
  },

  {
    title: "Unbroken",
    rating: 5,
    hasWatched: true
  },

  {
    title: "Frozen 2",
    rating: 5,
    hasWatched: false
  },

  {
    title: "Encanto",
    rating: 5,
    hasWatched: false
  },

  {
    title: "Forrest Gump",
    rating: 5,
    hasWatched: true
  }
];

const printWatched = document.querySelector(".moviesWatched");
const printNotWatched = document.querySelector(".moviesNotWatched");

for (let i = 0; movies.length > i; i++) {
  if(movies[i].hasWatched === true) {
    document.write("<p> You have watched " + '"' + movies[i].title + '"' + " - " + movies[i].rating + " stars <br> </p>");
} else {
     document.write("<p>You have not seen " + '"' + movies[i].title + '"' + " - " + movies[i].rating + " stars <br> </p>");
  }
}

Thank you guys for helping.

Answer 1

You are overwriting previous text with the last text. Create a variable and append all those string. Then at last use innerHTML

let movies = [{
    title: "Spider-Man: No Way Home",
    rating: 3.5,
    hasWatched: true
  },

  {
    title: "Unbroken",
    rating: 5,
    hasWatched: true
  },

  {
    title: "Frozen 2",
    rating: 5,
    hasWatched: false
  },

  {
    title: "Encanto",
    rating: 5,
    hasWatched: false
  },

  {
    title: "Forrest Gump",
    rating: 5,
    hasWatched: true
  }
];

const printWatched = document.querySelector(".moviesWatched");
const printNotWatched = document.querySelector(".moviesNotWatched");
let moviesWatched = '';
let moviesNotWatched = '';

for (let i = 0; movies.length > i; i++) {
  if (movies[i].hasWatched) {
    moviesWatched += `You have watched ${movies[i].title} -  ${movies[i].rating} stars`;
  } else {
    moviesNotWatched += `You have not seen ${movies[i].title} - ${ movies[i].rating} stars /n`;
  }
}
printWatched.innerHTML = moviesWatched;
printNotWatched.innerHTML = moviesNotWatched;

<div class='moviesWatched'></div>
<div class='moviesNotWatched'></div>