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>");
}
}
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 insideif (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()
}
}
}
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>");
}
}
}
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>");
}
}
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.
