如何使用循环使用Javascript更改div id

我的任务是使用简单的香草Javascript更改HTML内容

HTML已经给出，我只需要编写JS部分

任务包括根据单击的按钮更改HTML内容。如果单击“红色”，则只会显示红色说明，其他颜色也会显示红色说明

HTML、CSS和JS代码包括：

函数显示\u含义（颜色）{
document.getElementById（“empty_div”）.style.display=“无”；
document.getElementById（“body”）.style.backgroundColor=颜色；
document.getElementById（color.style.display=“block”；
如果（颜色=“红色”）{
document.getElementById（“蓝色”）.style.display=“无”；
document.getElementById（“绿色”）.style.display=“无”
}否则如果（颜色=“蓝色”）{
document.getElementById（“红色”）.style.display=“无”；
document.getElementById（“绿色”）.style.display=“无”；
}否则{
document.getElementById（“蓝色”）.style.display=“无”；
document.getElementById（“红色”）.style.display=“无”
} 
}

#红#蓝#绿{
显示：无；
}
#空分区{
显示：块；
}

点击下面的按钮查看每种颜色的含义！
红色是火和血的颜色，因此它与能量、战争、，
危险、力量、力量、决心以及激情、欲望和爱。
绿色是生长和健康的颜色。
蓝色是天空和海洋的颜色。
红色
绿色
蓝色

首先，您可以创建一个函数来重置（隐藏）所有div，然后应用该函数来显示所需的div。您不需要for循环，因为如果要添加新项，则必须将所有id添加到数组中。 以下是解决您问题的简单方法：

const show_意思=（颜色）=>{
希德尔（）；
让color\u div=document.getElementById（color）；
color\u div.style.backgroundColor=颜色；
color_div.style.display='block'；
}
常量hideAll=（）=>{
const items=document.queryselectoral（'.color item'）；
items.forEach（（item）=>item.style.display='none'）；
}
//希德尔（）
/**红色、蓝色、绿色{
显示：无；
}
不再需要这个了
**/
#空分区{
显示：块；
}
.颜色项{
显示：无；
}

点击下面的按钮查看每种颜色的含义！
红色是火和血的颜色，因此它与能量、战争、，
危险、力量、力量、决心以及激情、欲望和爱。
绿色是生长和健康的颜色。
蓝色是天空和海洋的颜色。
红色
绿色
BLUE
“我正在给任务更改HTML内容”好的，但是，任务的具体内容是什么？这里的问题是什么，你面临什么问题？这不是解决此类问题的合适网站，重构/优化代码也更好，为什么你认为循环在这里会有所帮助？使用循环的目的是什么？该代码段不起作用！抱歉@CalvinNunes，这是我在Stackoverflow上提出的第一个问题，下次我会改进。我还想知道如何使用循环来实现它，只是因为我听说它可以实现，但我不知道如何实现。非常感谢您的帮助，gugateider！：）不客气，欢迎来到stack overflow。如果此答案对您有帮助，请单击“接受答案”。您还可以删除内联JS并将颜色作为数据属性。哦，太好了！谢谢@Andy