循环不是每一轮都输出

我的目标是让这段代码通过循环并输出数组中的所有数据。

无法让此循环输出整个数组。我认为它是覆盖输出元素而不是创建一个新元素。我的期望是让para.textContent = CD[i];创建一个新

元素并输出数组中的每个字符串。有十个字符串，所以我应该期待十个输出。

我做错了什么？谢谢

const CD = ['BlastOff!', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Let the Count Down Begin!!!'];
const div = document.querySelector('#output');
const para = document.createElement('p');
div.appendChild(para);
console.log(para);

for (let i = CD.length; i != 0; i--) {
if (i != 0) {
para.textContent = CD[i];
console.log(para);
}
}

.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="output"></div>

<script src='java.js'></script>

</body>
</html>

您只创建一个段落标签，并在循环的每次迭代中覆盖其值。

为了实现您想要的，您需要为循环中的每个数组项创建一个新段落，如下所示

const CD = ['BlastOff!', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Let the Count Down Begin!!!'];
const div = document.querySelector('#output');
for (let i = CD.length; i >= 0; i--) {
const para = document.createElement('p');
para.textContent = CD[i];
div.appendChild(para);
console.log(para);
}

并且无需再次检查循环内是否为 i ！== 0。

列表中最后一个元素的索引是CD.length - 1。第一个的索引是0.因此，您的循环被移动了一个，并且您错过了第一项(并且还尝试访问无效索引(。

我想你忘了为每个值创建一个新段落？

const CD = [ 'BlastOff!', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Let the Count Down Begin!!!' ];
const div = document.querySelector('#output');
for (let i = CD.length; i--;)
{
let newP = document.createElement('p');
newP.textContent  = CD[i];
div.appendChild(newP);
}

<div id="output"></div>

或者你想显示一个"真正的"倒计时？
在这种情况下，你必须使用setInterval：

const CD   = ['BlastOff!', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Let the Count Down Begin!!!']
,   div  = document.querySelector('#output')
,   para = document.createElement('p')
;
let xCD = CD.length
;
div.appendChild(para)
para.textContent = CD[--xCD]
let intervRef = setInterval(() =>
{
para.textContent = CD[--xCD]
if (!xCD) clearInterval(intervRef)
}
, 800);

<div id="output"></div>

相关内容

最新更新

热门标签：