Solution 1 :

It’s simply because with innerHTML you are replacing the content of the element, not adding something to it! So every time your loop iterates it just replaces all the html in last iterations with only the last one!

var arrlist = ["Aron", "Bill", "Camile", "Denn", "Earling", "Fiora", "Gibson"];

var a = arrlist.length;
var b = 3;
var c = 3;
function x() {
  for (var i = 0; i < b; i++) {
    var x = b*(c-1) +i;
    var k = i + 1;
    if (b*(c-1) +i >= a ) {
      var x = (b*(c-1) +i)%a;
    }
    document.getElementById('listshow').innerHTML = document.getElementById('listshow').innerHTML + "<table border='1' width='200px'><thead><tr><th colspan='2'>" +c+ "th list of names</th></tr></thead> <tbody><tr><th width='30%'>" +k+ "th</th><td width='70%' >"+arrlist[x]+ "</td></tr></tbody></table>";
  }
}

function y() {
  for (var i = 0; i < b; i++) {
    var x = b*(c-1) +i;
    var k = i + 1;
    if (b*(c-1) +i >= a ) {
      var x = (b*(c-1) +i)%a;
    }
    document.write("<table border='1' width='200px'><thead><tr><th colspan='2'>" +c+ "th list of names</th></tr></thead> <tbody><tr><th width='30%'>" +k+ "th</th><td width='70%' >"+arrlist[x]+ "</td></tr></tbody></table>");
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    
  </head>
  <body>
    <button onclick='x();'>document.getElementById().innerHTML</button>
    <button onclick='y();'>document.write()</button>
    <div id="listshow"></div>
  </body>
</html>

You can see this in the above example. This way both pieces of code result in the same HTML.

Solution 2 :

document.write() adds some text/html in the document.

innerHTML is the full content of the node. So assigning it will replace the content.
This should work:

document.getElementById('listshow').innerHTML += "<table border='1' width='200px'><thead><tr><th colspan='2'>" +c+ "th list of names</th></tr></thead> <tbody><tr><th width='30%'>" +k+ "th</th><td width='70%' >"+arrlist[x]+ "</td></tr></tbody></table>";

Notice the “+=”

Solution 3 :

1. The statement is in different location.

  • .innerHTML = /* ... */ is inside if (b*(c-1) +i >= a ), so it will only be executed conditionally.
  • document.write(/* ... */) is outside the if (b*(c-1) +i >= a ), so it will be executed three times.

2. The first one overwrites repeatedly, the second one appends.

  • .innerHTML = /* ... */ will change the contents of the node with every call, not add to it.
  • document.write(/* ... */) will write repeatedly to the same document.

The document.write() one is actually more involved – document.write() does an implicit document.open(), if not done yet, which allows writing and will clear the current page. From MDN:

calling document.write on a closed (loaded) document automatically calls document.open

Also, there is an implicit document.close() after all write operations have finished. So, if you repeatedly call document.write() in a loop, the document.close() will only be called after those are finished, and you’d get multiple items written.

So, one way to make them work the same is to add an explicit document.close() which will do repeat overwrites, like setting the .innerHTML:

var arrlist = ["Aron", "Bill", "Camile", "Denn", "Earling", "Fiora", "Gibson"];

var a = arrlist.length;
var b = 3;
var c = 3;
function x() {
  for (var i = 0; i < b; i++) {
    var x = b*(c-1) +i;
    var k = i + 1;
    if (b*(c-1) +i >= a ) {
      var x = (b*(c-1) +i)%a;
      document.getElementById('listshow').innerHTML = "<table border='1' width='200px'><thead><tr><th colspan='2'>" +c+ "th list of names</th></tr></thead> <tbody><tr><th width='30%'>" +k+ "th</th><td width='70%' >"+arrlist[x]+ "</td></tr></tbody></table>";
    }
  }
}

function y() {
  for (var i = 0; i < b; i++) {
    var x = b*(c-1) +i;
    var k = i + 1;
    if (b*(c-1) +i >= a ) {
      var x = (b*(c-1) +i)%a;
      /* document.open() is implicit here */
      document.write("<table border='1' width='200px'><thead><tr><th colspan='2'>" +c+ "th list of names</th></tr></thead> <tbody><tr><th width='30%'>" +k+ "th</th><td width='70%' >"+arrlist[x]+ "</td></tr></tbody></table>");
      document.close()
    }
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    
  </head>
  <body>
    <button onclick='x();'>document.getElementById().innerHTML</button>
    <button onclick='y();'>document.write()</button>
    <div id="listshow"></div>
  </body>
  <script src="script.js"></script>

Alternatively, you can make the first function append, instead of overwrite by using the += operator:

var arrlist = ["Aron", "Bill", "Camile", "Denn", "Earling", "Fiora", "Gibson"];

var a = arrlist.length;
var b = 3;
var c = 3;
function x() {
  for (var i = 0; i < b; i++) {
    var x = b*(c-1) +i;
    var k = i + 1;
    if (b*(c-1) +i >= a ) {
      var x = (b*(c-1) +i)%a;
      document.getElementById('listshow').innerHTML += "<table border='1' width='200px'><thead><tr><th colspan='2'>" +c+ "th list of names</th></tr></thead> <tbody><tr><th width='30%'>" +k+ "th</th><td width='70%' >"+arrlist[x]+ "</td></tr></tbody></table>";
    }
  }
}

function y() {
  for (var i = 0; i < b; i++) {
    var x = b*(c-1) +i;
    var k = i + 1;
    if (b*(c-1) +i >= a ) {
      var x = (b*(c-1) +i)%a;
      /* document.open() is implicit here */
      document.write("<table border='1' width='200px'><thead><tr><th colspan='2'>" +c+ "th list of names</th></tr></thead> <tbody><tr><th width='30%'>" +k+ "th</th><td width='70%' >"+arrlist[x]+ "</td></tr></tbody></table>");
    }
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    
  </head>
  <body>
    <button onclick='x();'>document.getElementById().innerHTML</button>
    <button onclick='y();'>document.write()</button>
    <div id="listshow"></div>
  </body>
  <script src="script.js"></script>

Problem :

To be clear with document.write(), I know this is outdated and do not want to reload and close the website. So I came up with document.getElementById().innerHTML for an alternative.

However, the problem is, document.getElementById().innerHTML does not bring me the result I wrote for but document.write() does.

So, how can I develop my document.getElementById().innerHTML code as the result of using document.write()?

I’ve been looking for the differences between .write and .innerHTML though, could you help me to understand the remarkable differences between two of them with the example I bring in?

Here is the code.

var arrlist = ["Aron", "Bill", "Camile", "Denn", "Earling", "Fiora", "Gibson"];

var a = arrlist.length;
var b = 3;
var c = 3;
function x() {
  for (var i = 0; i < b; i++) {
    var x = b*(c-1) +i;
    var k = i + 1;
    if (b*(c-1) +i >= a ) {
      var x = (b*(c-1) +i)%a;
      document.getElementById('listshow').innerHTML = "<table border='1' width='200px'><thead><tr><th colspan='2'>" +c+ "th list of names</th></tr></thead> <tbody><tr><th width='30%'>" +k+ "th</th><td width='70%' >"+arrlist[x]+ "</td></tr></tbody></table>";
    }
  }
}

function y() {
  for (var i = 0; i < b; i++) {
    var x = b*(c-1) +i;
    var k = i + 1;
    if (b*(c-1) +i >= a ) {
      var x = (b*(c-1) +i)%a;
    }
    document.write("<table border='1' width='200px'><thead><tr><th colspan='2'>" +c+ "th list of names</th></tr></thead> <tbody><tr><th width='30%'>" +k+ "th</th><td width='70%' >"+arrlist[x]+ "</td></tr></tbody></table>");
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    
  </head>
  <body>
    <button onclick='x();'>document.getElementById().innerHTML</button>
    <button onclick='y();'>document.write()</button>
    <div id="listshow"></div>
  </body>
  <script src="script.js"></script>

Comments

Comment posted by Heretic Monkey

Use

Comment posted by Just Doo

Changed as you suggested, but the rows I want to see does not fully come up.

Comment posted by Heretic Monkey

Note that in your

Comment posted by Just Doo

What a glorious day to learn. Thanks for teaching!

Comment posted by epascarello

because each time you use .innerHTML you replace the contents…. It is not concatenation. If you had

Comment posted by Just Doo

thought ‘a += b’ is equal to ‘a= a+b’. If I’m right, why your code and += is different?

Comment posted by Ashkan Pourghasem

I don’t understand what you mean

Comment posted by Just Doo

Thanks. It helped a bit, but only can see two rows not three rows I mean to.

Comment posted by Ashkan Pourghasem

@JustDoo That’s because there was another mistake in your loop. In the second one you’re appending outside of that if condition. In the first one it was inside the condition. I fixed that in my example and you can see the results are idenntical.

By

Leave a Reply

Your email address will not be published. Required fields are marked *