the image shows my idea和 这就是我现在所拥有的 - ＆gt;
JS代码背后的主要思想是创建矩阵5x5的HTML视图，就像在图像上给出的一样。不幸的是，我的数字会覆盖自己。 我该如何解决？
function numberMatrix() {
var items = [
[1, 3, 3, 3, 3],
[2, 1, 3, 3, 3],
[2, 2, 1, 3, 3],
[2, 2, 2, 1, 3],
[2, 2, 2, 2, 1]
];
var y = 0;
var par = document.getElementById('it');
while ( y < 5 ) {
for (var i = 0; i < 5; i++) {
par.innerHTML = items[y][i];
}
par.innerHTML = '<br>';
y++;
}
}
numberMatrix();#it {
border: 1px solid green;
font-size: 150%;
}<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<p id="it"></p>
<script src="js/main.js"></script>
</body>
</html>
答案 0 :(得分：2)
使用`+ =＆＃39;而不是＆＃39; =＆＃39;
while ( y < 5 ) {
for (var i = 0; i < 5; i++) {
par.innerHTML += items[y][i];
}
par.innerHTML += '<br>';
y++;
}
答案 1 :(得分：1)
你的问题是par永远不会改变，你会不断改变它的等同。
而是尝试使用+=附加信息
function numberMatrix() {
var items = [
[1, 3, 3, 3, 3],
[2, 1, 3, 3, 3],
[2, 2, 1, 3, 3],
[2, 2, 2, 1, 3],
[2, 2, 2, 2, 1]
];
var y = 0;
var par = document.getElementById('it');
while (y < 5) {
for (var i = 0; i < 5; i++) {
par.innerHTML += items[y][i];
}
par.innerHTML += '<br>';
y++;
}
}
numberMatrix();#it {
border: 1px solid green;
font-size: 150%;
}<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<p id="it"></p>
<script src="js/main.js"></script>
</body>
</html>
答案 2 :(得分：0)
您只有一个元素par，您没有更新。所以每次它都会覆盖旧的。如果你在html代码中使用<div>代替'
'并从javascript代码生成并添加'
'会更好'
'最后。
新的HTML代码
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div id="it"></div>
<script src="js/main.js"></script>
</body>
</html>
新的javascript代码：
function numberMatrix() {
var items = [
[1, 3, 3, 3, 3],
[2, 1, 3, 3, 3],
[2, 2, 1, 3, 3],
[2, 2, 2, 1, 3],
[2, 2, 2, 2, 1]
];
var y = 0;
var par = document.getElementById('it');
while ( y < 5 ) {
par.innerHTML = '<p>'
for (var i = 0; i < 5; i++) {
par.innerHTML = items[y][i];
}
par.innerHTML = '</p><br>';
y++;
}
}
numberMatrix();