1. Оператор находится в другом месте.
.innerHTML = /* ... */ - внутри if (b*(c-1) +i >= a ), поэтому он будет выполняться только условно. document.write(/* ... */) - за пределами if (b*(c-1) +i >= a ), поэтому он будет выполнен три раза.
2. Первый многократно перезаписывает , второй добавляет .
.innerHTML = /* ... */ будет изменять содержимое узла при каждом вызове, а не добавлять к нему . document.write(/* ... */) будет многократно писать в один и тот же документ.
На самом деле document.write() более вовлечен - document.write() делает неявное document.open(), если еще не сделано, что позволяет писать и очищает текущую страницу. От MDN :
вызов document.write для закрытого (загруженного) документа автоматически вызывает document.open
Также существует неявное document.close() после завершения всех операций записи. Таким образом, если вы неоднократно вызываете document.write() по всем oop, document.close() будет вызываться только после их завершения, и вы получите несколько записанных элементов.
Итак, один из способов сделать их работать так же, чтобы добавить явный document.close(), который будет выполнять повторные перезаписи, например, установить .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>
Кроме того, вы можете добавить первую функцию вместо перезаписи, используя оператор +=:
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>