将 Javascript 移动到模块后出现“无法读取未定义的属性 ClassList”错误答案

【问题标题】："Cannot read property ClassList of Undefined" error after moving Javascript into modules将 Javascript 移动到模块后出现“无法读取未定义的属性 ClassList”错误
【发布时间】：2021-07-21 05:24:20
【问题描述】：

我对 JS 非常陌生，在尝试将一些 JS 分成模块时遇到了问题。我认为这是一个简单的解决方法，但我希望这里有人可以帮助我朝着正确的方向前进。如果我将其全部放入一个 JS 文件并通过标签直接将其与 index.html 链接，我的代码就可以正常工作，因此在转移到模块时会出现一些问题。

在我的 HTML 中，我有几个元素会根据用户在网站上单击的按钮来改变可见性。在我尝试将其放入模块之前，原始脚本文件中编写的 JS 运行良好：

showHideSections = (section) => {
if (section.classList.contains("hidden")){
    section.classList.remove("remove-tab");
    section.classList.remove("slideout");
     ... };

所以，我在代码开头添加了 export const 以将其导出到 main.js 文件：

export const showHideSections = (section) => { ...

然后导入到main.js中：

import { ..., showHideSections, ... } from "./modules/script.js"

window.addEventListener("DOMContentLoaded", () => {
...
showHideSections();
... });

现在我得到了 Uncaught TypeError: cannot read property "ClassList" of undefined.

我猜这与 JS 移入模块后代码运行的顺序有关，但在几次尝试指示代码以不同方式执行后，我感觉卡住了。我尝试调整 main.js 上的 addEventListener 以在“加载”与 DOM 内容加载时执行。我还尝试为 script.js 文件中的元素创建一个对象作为解决方法，但那里也没有骰子。

有什么想法吗？

【问题讨论】：

标签： javascript html import module export

【解决方案1】：

好吧，您似乎没有在方法调用中传递 section 参数：

import { ..., showHideSections, ... } from "./modules/script.js"

window.addEventListener("DOMContentLoaded", () => {
  const section = document.querySelector("#someSelectorHere");
  showHideSections(section);
 });

【讨论】：

非常感谢您的评论！那么，你是在说这样的话吗？显示隐藏部分（部分）；这会在 main.js 上返回一个新的 Uncaught ReferenceError ，该部分未定义。如果我误解了您的建议，我们深表歉意。
我还尝试在 showHideSections 函数上方创建一个新函数，其中包含一个 document.getElementsbyTagName("section")，然后将其导出。不行，同样的错误。
在 script.js 中，您定义了一个函数，该函数接收名为 section 的参数并在条件中使用它。稍后您导入该函数并且不发送该参数，因此您可以发送它或修改您的条件。另外，如果你想获取一个特定的元素，给它一个 id/class 并使用 document.querySelector("#yourIdHere");
首先，在这种情况下，您将如何将参数发送到 main.js？对不起，初学者的问题，我很难找到答案。
对于第二点，我假设我会遇到的问题是，因为我有许多不同的类分配给
，我需要在我的 JS 中按顺序使用 element.ClassList适当地删除/添加部分。据我了解，如果我使用 querySelector 定位特定类，我将无法修改其他类，因为我只选择了一个，对吗？再次感谢您的宝贵时间。