Javascript 在循环中显示对象值十次

我试图用事件循环对象输出，但由于某些原因，我遗漏了一些东西

让谷物={
健康：“小麦”，
甜心：“特里克斯”，
无聊的：“麸皮”，
};
//console.log（谷物健康[]）；
const cerealDisplay=document.getElementById（“谷物”）；
常量changeColor=（e）=>{
cerealDisplay.style.color='红色'；
设置超时（（）=>{
cerealDisplay.style.color='blue'；
}, 2000);
};
对于循环中的（让i=0；i），我认为您希望创建一个新的子项并将其添加到display div

单击其中一个子项时，您需要通过
event.target
访问它


让谷物={
健康：“小麦”，
甜心：“特里克斯”，
无聊的：“麸皮”，
};
const cerealDisplay=document.getElementById（“谷物”）；
常量changeColor=（{target:cerealChild}）=>{
cerealChild.style.color='红色'；
设置超时（（）=>{
cerealChild.style.color='blue'；
}, 2000);
};
for（设i=0；i<10；i++）{
const cerealChild=document.createElement（'div'）；
cerealChild.textContent=Object.values（谷物）.join（'，'）；
cerealChild.classList.add（'谷物'）；
cerealChild.addEventListener（'单击'，更改颜色）；
cerealDisplay.append（cerealChild）；
}
#谷物{
字体系列：“Lucida Sans”、“Lucida Sans Regular”、“Lucida Grande”、“Lucida Sans Unicode”、日内瓦、Verdana、无衬线；
字号：1em；
保证金：自动；
文本对齐：居中；
光标：指针；
}
您每次都在覆盖innerHTML。您可能想使用
+=
来代替，比如
cerealDisplay.innerHTML+=
。此外，“不循环”不是一个描述性问题，请查看。将来您也可以使用
console.log（）
验证正在执行的代码，这会告诉您循环正在运行，并帮助您找到问题。您的
cerealDisplay
与谷物js对象无关。此外，您还评论了console.log不正确，如果您尝试运行它，它将不起作用，它应该是
grane.health
或
grane[“健康”]
下次我会更好地解释它。我更新了标题问题。谢谢你，但我的目标是将这三个值显示10倍。我只是在练习Javascript。@StephenW我查看了你的外部代码片段并解决了这个问题。谢谢。这就是我的目的。下次我会更好地解释它。我更新了标题问题。
let cereal = {
    healthy: 'wheaties',
    sugary: 'Trix',
    boring: 'Bran',
};

//console.log(cereal.healthy[]);

const cerealDisplay = document.getElementById('cereal');

const changeColor = (e) => {
    cerealDisplay.style.color = 'red';
    setTimeout(() => {
        cerealDisplay.style.color = 'blue';
    }, 2000);
};

for (let i = 0; i <= 10; i++) {
    cerealDisplay.innerHTML =
        cereal.healthy + ', ' + cereal.sugary + ', ' + cereal.boring;

    cerealDisplay.classList.add('cereal');
    cerealDisplay.addEventListener('click', changeColor);
}