javascript - 为什么 JavaScript 将元素写入控制台但不通过函数更新 css 显示值？-6ren

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

转载作者：行者123 更新时间：2023-12-02 22:47:24

我正在作为小组的一员完成一项大学作业。当使用 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<sections.length;i++) {
		console.log(sections[i]);
	}
*/
function changeActiveSection(sectionID) {
  if (visSection === sectionID) {
    visSection = null;
  } else {
    visSection = sectionID;
  }
  hideSections();
}

function hideSections() {
  var i, targetSection, headerText;
  for (i = 0; i < sections.length; i++) {
    targetSection = sections[i];
    section = document.getElementById(visSection);
    if (visSection === targetSection) {
      //				console.log(visSection, targetSection, section);
      section.style.display = "block";
      headerText = visSection;
    } else {
      section.style.display = "none";
    }
    populateHeader(headerText);
  }
}

function populateHeader(headerText) {
  var ob;
  ob = document.getElementById("header-content");
  ob.innerText = headerText;
}

<!doctype HTML>
<html>

<body>
  <header>
    <h1 id="header-content" style="display: block;">Welcome to The A2-Group-12 Team</h1>
  </header>
  <a href="#" onclick="changeActiveSection('Stanton')">Stanton</a>
  <div id="Stanton" class="body-panel" style="display: none;">
    <h2> this is a placeholder heading </h2>
    <p> this is some placeholder body text. </p>
    <p> Stanton </p>
  </div>
  <script>
  //Insert JS from JS snippet
  </script>
</body>

</html>

我觉得我们可能在某个地方误解了某种数据类型，但我们仍在学习，并且已经盯着这个问题好几天了(问题可能就在我们眼前!)。

<小时/>

带有 CSS 的完整代码片段:

let sections = ["Cooper", "Jenna", "Lyly", "Mick", "Samuel", "Stanton", "Welcome"];
var visSection = null;

var i;
for (i = 0; i < sections.length; i++) {
  console.log(sections[i]);
}

function changeActiveSection(sectionID) {
  if (visSection === sectionID) {
    visSection = null;
  } else {
    visSection = sectionID;
  }
  hideSections(visSection);
}

function hideSections(sectionID2) {
  var i, targetSection, headerText;
  for (i = 0; i < sections.length; i++) {
    targetSection = sections[i];
    section = document.getElementById(sectionID2);
    if (visSection === targetSection) {
      console.log(visSection, targetSection, section);
      section.style.display = "block";
      headerText = visSection;
    } else {
      section.style.display = "none";
    }
    populateHeader(headerText);
  }
}

function populateHeader(headerText) {
  var ob;
  ob = document.getElementById("header-content");
  ob.innerText = headerText;
}

var dropdown = document.getElementsByTagName("button");
var i, objCol;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

/*Sets the font family for entire page.
removes entire margin for body section to create borderless display.*/

body {
  font-family: Arial, Veranda, Serif;
  margin: 0;
}


/*Sets attributes for the nav menu root element*/

#nav-menu {
  height: 100%;
  width: 15%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #353940;
  overflow-x: hidden;
  text-decoration: none;
  text-align: center;
  z-index: 1;
}


/*specifies hyperlink button text attributes*/

#nav-menu a {
  text-decoration: none;
  color: white;
  font-size: 12pt;
  display: block;
  border-top: 1px solid white;
  overflow: visible;
  height: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}


/*Specifies most dropdown button attributes.*/

button.drop-button {
  text-decoration: none;
  background-color: #353940;
  border: 0;
  width: 100%;
  color: white;
  height: 20px;
  outline: none;
  font-size: 12pt;
  border-top: 1px solid white;
  overflow: visible;
  padding-top: 5px;
  padding-bottom: 5px;
}


/*Active class to highlight activated dropdown buttons*/

button.active {
  background: #230fa8;
}


/*container class for dropdown menu items - hidden by default (display is manupulated via JS)*/

.dropdown-content {
  display: none;
  background-color: #4a5059;
}


/*specifies layout for dropdown menu items*/

.dropdown-content a {
  display: block;
  padding-top: 5px;
}


/*keeps header in line with rest of body*/

#header-content {
  padding-left: 17%;
}


/*specifies positioning for body container divs*/

.body-panel {
  position: absolute;
  padding-left: 17%;
  width: 75%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" meta charset="utf-8" />
  <title>Assignment 2 Group 12</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <h1 id="header-content" style="display: block;">Welcome to The A2-Group-12 Team</h1>
  </header>
  <main>
    <nav id="nav-menu">
      <a href="#" onclick="changeActiveSection('Welcome')">Home</a>
      <button class="drop-button">About Us &#x25BC </button>
      <div class="dropdown-content" style="display: none;">
        <a href="#" onclick="changeActiveSection('Stanton')">Stanton</a>
        <a href="#" onclick="changeActiveSection('Jenna')">Jenna</a>
        <a href="#" onclick="changeActiveSection('Cooper')">Cooper</a>
      </div>
      <button class="drop-button">Profile &#x25BC;</button>
      <div class="dropdown-content">
        <a href="#">Test</a>
      </div>
      <a href="#" onclick="changeActiveSection('IT Work')">IT Work</a>
      <a href="#" onclick="changeActiveSection('Industry Data')">Industry Data</a>
      <a href="#" onclick="changeActiveSection('Our Project')">Our Project</a>
      <a href="#" onclick="changeActiveSection('IT Technologies')">IT Technologies</a>

    </nav>
    <div id="Welcome" class="body-panel" style="display: none;">
      <h2> </h2>
      <p> Please select an option from the menu. </p>
    </div>
    <div id="Stanton" class="body-panel" style="display: none;">
      <h2> this is a placeholder heading </h2>
      <p> this is some placeholder body text. </p>
      <p> Stanton </p>
    </div>
    <div id="Jenna" class="body-panel" style="display: none;">
      <h2> this is a placeholder heading </h2>
      <p> this is some placeholder body text. </p>
      <p> Jenna </p>
    </div>
    <div id="Cooper" class="body-panel" style="display: none;">
      <h2> this is a placeholder heading </h2>
      <p> this is some placeholder body text. </p>
      <p> Cooper </p>
    </div>
  </main>
  <footer>

  </footer>
  <script>
    //JS from snippet goes here
  </script>
</body>

</html>

最佳答案

let sections = ["Cooper", "Jenna", "Lyly", "Mick", "Samuel", "Stanton", "Welcome"];
var visSection = null;

var i;
for (i = 0; i < sections.length; i++) {
  console.log(sections[i]);
}

function changeActiveSection(sectionID) {
  if (visSection === sectionID) {
    visSection = null;
  } else {
    visSection = sectionID;
  }
  hideSections(visSection);
}

function hideSections(sectionID2) {
  var i, targetSection, headerText;
  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 {
              
              if (typeof(section) != 'undefined' && section != null){
                    section.style.display = "none";
                 }
              
            }
            //populateHeader(headerText); <- move as per Andreas point
        }   
    }

function populateHeader(headerText) {
  var ob;
  ob = document.getElementById("header-content");
  ob.innerText = headerText;
}

var dropdown = document.getElementsByTagName("button");
var i, objCol;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

/*Sets the font family for entire page.
removes entire margin for body section to create borderless display.*/

body {
  font-family: Arial, Veranda, Serif;
  margin: 0;
}


/*Sets attributes for the nav menu root element*/

#nav-menu {
  height: 100%;
  width: 15%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #353940;
  overflow-x: hidden;
  text-decoration: none;
  text-align: center;
  z-index: 1;
}


/*specifies hyperlink button text attributes*/

#nav-menu a {
  text-decoration: none;
  color: white;
  font-size: 12pt;
  display: block;
  border-top: 1px solid white;
  overflow: visible;
  height: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}


/*Specifies most dropdown button attributes.*/

button.drop-button {
  text-decoration: none;
  background-color: #353940;
  border: 0;
  width: 100%;
  color: white;
  height: 20px;
  outline: none;
  font-size: 12pt;
  border-top: 1px solid white;
  overflow: visible;
  padding-top: 5px;
  padding-bottom: 5px;
}


/*Active class to highlight activated dropdown buttons*/

button.active {
  background: #230fa8;
}


/*container class for dropdown menu items - hidden by default (display is manupulated via JS)*/

.dropdown-content {
  display: none;
  background-color: #4a5059;
}


/*specifies layout for dropdown menu items*/

.dropdown-content a {
  display: block;
  padding-top: 5px;
}


/*keeps header in line with rest of body*/

#header-content {
  padding-left: 17%;
}


/*specifies positioning for body container divs*/

.body-panel {
  position: absolute;
  padding-left: 17%;
  width: 75%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" meta charset="utf-8" />
  <title>Assignment 2 Group 12</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <h1 id="header-content" style="display: block;">Welcome to The A2-Group-12 Team</h1>
  </header>
  <main>
    <nav id="nav-menu">
      <a href="#" onclick="changeActiveSection('Welcome')">Home</a>
      <button class="drop-button">About Us &#x25BC </button>
      <div class="dropdown-content" style="display: none;">
        <a href="#" onclick="changeActiveSection('Stanton')">Stanton</a>
        <a href="#" onclick="changeActiveSection('Jenna')">Jenna</a>
        <a href="#" onclick="changeActiveSection('Cooper')">Cooper</a>
      </div>
      <button class="drop-button">Profile &#x25BC;</button>
      <div class="dropdown-content">
        <a href="#">Test</a>
      </div>
      <a href="#" onclick="changeActiveSection('IT Work')">IT Work</a>
      <a href="#" onclick="changeActiveSection('Industry Data')">Industry Data</a>
      <a href="#" onclick="changeActiveSection('Our Project')">Our Project</a>
      <a href="#" onclick="changeActiveSection('IT Technologies')">IT Technologies</a>

    </nav>
    <div id="Welcome" class="body-panel" style="display: none;">
      <h2> </h2>
      <p> Please select an option from the menu. </p>
    </div>
    <div id="Stanton" class="body-panel" style="display: none;">
      <h2> this is a placeholder heading </h2>
      <p> this is some placeholder body text. </p>
      <p> Stanton </p>
    </div>
    <div id="Jenna" class="body-panel" style="display: none;">
      <h2> this is a placeholder heading </h2>
      <p> this is some placeholder body text. </p>
      <p> Jenna </p>
    </div>
    <div id="Cooper" class="body-panel" style="display: none;">
      <h2> this is a placeholder heading </h2>
      <p> this is some placeholder body text. </p>
      <p> Cooper </p>
    </div>
  </main>
  <footer>

  </footer>
  <script>
    //JS from snippet goes here
  </script>
</body>

</html>

关于javascript - 为什么 JavaScript 将元素写入控制台但不通过函数更新 css 显示值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58339840/

文章推荐： javascript - Chrome 扩展程序可在所有页面中启用聊天机器人

文章推荐： javascript - 对 Node 中的字母数字 li 进行排序

文章推荐： javascript - MapboxGL 挤出线/圆

eclipse - 运行 RCP 应用程序的 OSGi 控制台(不是主机 OSGi 控制台)
我需要检查在我的 RCP 应用程序中启动时是否加载了某些包。我知道有一个“主机 OSGi 控制台”可以显示 Eclipse IDE 中所有插件的状态，但我对这些不感兴趣。我执行了以下步骤来获取我的应
python - 让 'interact' 使用 IPython 控制台，而不是标准的 Python 控制台？
在 pdb/ipdb 调试中，有用的 interact 命令为我提供了一个功能齐全的交互式 Python 控制台。但是，这似乎始终是“标准”Python 控制台，即使我使用 ipdb 开始也是如此。
C# 控制台？
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
控制台/终端模式菜单中的 Emacs
我搜索过但找不到答案:如何在运行 Emacs 时选择:文件、编辑、选项、缓冲区、工具、C++ 等下拉菜单在控制台模式下？不是终端菜单。不，F10 不是答案。最佳答案如果不是 F10，那么 M-x
c# - 如何每隔几秒截屏一次C#控制台
我正在制作一个每 20-40 秒截屏一次的 c# 控制台应用程序。我试过到处找，但所有其他示例都没有使用控制台这是我到目前为止所做的代码: using System; using System.D
terraform 控制台 - 如何获取模块属性值
尝试使用 terraform 控制台，新功能。我使用 tfstate 进入我的项目并运行“terraform 控制台”。我可以使用常规插值系统获取变量值、数据和资源。但是，模块很难破解，我无法正确
Django SQL 控制台
我正在尝试调试一段返回错误的 SQL。我不确定 django 或 mysql 是否处理错误，所以我想通过 django 控制台运行它。有办法设置吗？提前致谢。最佳答案 manage.py dbs
Java 控制台 JPanel
你好是否可以在 JPanel 中绘制 java 控制台返回的内容？你有教程可以遵循吗？谢谢开关最佳答案我不记得在哪里找到这个，但我已使用我称为 TextAreaOutputStream 的类将输出
Xcode 控制台，以编程方式清屏
我对 Xcode 甚至编程都有点陌生。在 Xcode 中，在我的代码中，如何显示控制台并清除屏幕？我知道我可以使用 Xcode 首选项来完成此操作，但我想以编程方式完成此操作。最佳答案这对我有
C# 控制台/服务器访问网站
我正在开发一个 C# 项目，我需要从没有 API 或 Web 服务的安全网站获取数据。我的计划是登录，访问我需要的页面，并解析 HTML 以获取记录到数据库所需的数据位。现在我正在使用控制台应用程序进
C 控制台 - 分隔不同的值
我是编程新手，正在尝试不同的在线事件以掌握它。我遇到了一个特定的问题，我想制作一个程序，用户输入一个值并打印一个特定的字符串。例如，当用户输入 0 时，将打印字符串“black”，输入 1 将打印字符
java - 如何创建终端/控制台
我想创建一个终端/控制台，用户可以在其中输入命令。我知道 java，但我是 xml 的新手，所以我想知道如何在文本下生成文本，如果它变得很长，它应该是可滚动的，这是一张图片: 这是我的 xml cpd
C++ 控制台 - 格式化输出
我有一个由随机生成的数字组成的 nxn 网格。我有一个标签显示 X 轴和 Y 轴的元素编号: 对于单个数字，它可以正确对齐，但是当网格大小增加时，标签会变得不成比例并且不会像这样对齐: 我想知道是否有
C++(控制台)构造函数和派生类
假设我创建了一个包含两个变量的结构。 struct mystruct{ public: string name; int age;}; class School :public mystruct{ p
带日志记录的 Python 控制台
我正在重写一个服务器程序，我想在其中添加一个简单的控制台输入。目前，它只是提供数据并为它所做的每一件事打印出一两行，作为任何观看/调试的人的描述性措施。我想要的是有一个始终位于底部的“粘性”输入栏
Linux 控制台 - 启动进程并等待完成
我必须编写启动另一个进程(GUI)的控制台应用程序。然后，使用其他应用程序或相同的选项，我必须能够停止子进程。此外，如果子进程从 GUI 关闭，则必须通知我执行最终任务(如果被杀死，则相同)。我认为
Linux 控制台/标准输出默认保存
我一直在尝试到处寻找以下问题的答案: Linux上的标准输出/控制台默认将内容保存到文件中吗？我不想保存内容或重定向输出(我已经知道这一点)，我只是想知道它是否已经通过 linux 中包含的某个默认
C 控制台 - 在同一行打印图案
我正在尝试不同的事件，因为我是初学者并且想了解更多。我正在尝试在我的代码所在的同一行打印一个图案: int main() { int numOfWiggles; int count;
C# 控制台 - 输入和删除数组
在我的一项小任务中，我被要求创建一个数组来存储从用户提供的输入中获取的姓名和地址，并且稍后能够从数组中删除姓名和地址。如果能帮助我理解如何实现这一目标，我们将不胜感激，谢谢。编辑 - 该数组将像地
Python 控制台 - 检查特定模块中定义的类或函数
如果您想在 Python shell 中查看特定模块中定义了哪些模块，一种选择是键入 dir(path.to.module)。不幸的是，这不仅列出了特定模块中定义的类或函数，还包括该模块导入的类或函数

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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