为什么JavaScript向控制台写入元素，但不通过函数更新css显示值？

我作为一个小组的一员正在完成一项大学作业。我们遇到了一个问题，当使用JavaScript在单击按钮时更改css属性时，某个事件没有触发。我们不希望任何人编写/重新编写我们的代码以达到行业标准，但我们希望（在您的一点帮助下）找出我们的错误所在

我们的任务是写一份报告，并以网页形式呈现。 我们使用HTML/CSS和少量JavaScript编写页面，如下拉菜单和单击按钮显示页面部分

我们无法解决的特殊问题（下面的代码）是，当单击菜单按钮时，JS应该填充页面的标题，并在正文中显示一个

div

我可以让它按预期工作，尽管只引用了3个

div

（代码似乎忽略了第3个之后的数组元素），或者让它与所有标题一起工作，但没有引用任何

div

（见下文）

CMVE如下（完整代码如下）：

let sections=[“Cooper”、“Jenna”、“Lyly”、“Mick”、“Samuel”、“Stanton”、“Welcome”]；
var-visSection=null；
/*var i；
for（i=0；i问题在于
for
循环

您正在传入
节id2
，因此它始终是选中的项目，并存储为
节

循环为每个迭代设置项目的可见性，而不是针对当前节进行测试

将
section=document.getElementById（sectionID2）；
更改为
section=document.getElementById（targetSection）；
并且它应该可以工作（未测试）

for（i=0；ilet sections=[“Cooper”、“Jenna”、“Lyly”、“Mick”、“Samuel”、“Stanton”、“Welcome”]；
var-visSection=null；
var i；
对于（i=0；i//populateHeader（headerText）；
populateHeader（headerText）；
不应该是循环的一部分。你能创建一个代码笔或者我们可以在上面运行代码的东西吗？@SamuelEverson Yea:）我确实把你的代码复制粘贴到了一个html文件中，但是css不存在，所以我看到了一个糟糕的版本。而且很难看到它应该做什么。所以我跟着你，你能不能创建一个我可以制作的步骤列表来准确地看到问题。一些问题我想知道，1）我使用哪个菜单重要吗tem i click？2）如果复制代码的第二部分，是生成半工作版本的部分，还是第一位？
部分
将始终是具有给定id的div（
Stanton
），问题是您以两种方式更改它的可见性（
block
none
）因此，对于
Stanton
its:none，none，none，none，show，none
headerText
只会更改一次，因此
populateHeader（）
不应该在循环的每一轮都调用。headerText可以正常工作，我想在我正确更正之前您已经发表了评论。
section
在循环中发生了更改。它是正确的，但仍然会生成
sections.length-1
不必要的
populateHeader（）
调用，因为
headerText
只会更改一次。这与to的问题无关，只是一个代码气味；）sectionID2现在在代码中不相关-section在每次迭代时在循环中定义-他的节数组与DOMI中的元素不匹配只是添加了一个有效的小提琴…比删除要好很好的对话。你是对的，Samuel，解决由不良做法引起的问题会带来很多麻烦，但你可以稍后再解决，我们都必须学习，糟糕的代码是这个过程的一部分。很遗憾：-）。看看下面的fiddle是否能帮助你理解一切是如何工作的（在那里再放一些
console.log
）还要理解为什么会出现错误（以及我是如何纠正的）.Thank Graham，按预期工作！我已经从问题中的@Andreas评论中确定for循环存在一些问题，并指出else语句没有按预期工作。我看到您添加了一些额外的位，以便在没有任何内容时考虑，并将进一步研究它-再次感谢您的支持时间和精力！我想我最好添加注释，保留我给出的第一个答案（以下），因为对话足够有趣，可以解释代码的问题。
for(i = 0; i < sections.length; i++) {
                targetSection = sections[i];
                section = document.getElementById(targetSection);
                if(visSection === targetSection) {
                console.log(visSection, targetSection, section);
                  section.style.display = "block";
                  populateHeader(visSection); // moved to here as per Andreas point
                } else {
                  section.style.display = "none";
                }
                //populateHeader(headerText); <- move as per Andreas point
            }