Javascript 本地主机上的循环变量设置，但不在实时站点上

首先，我要说，作为一个狂热的浏览器（但从未发布过），提前感谢您提供的任何见解

我正在为我的雇主代码部门制作一个页面，该部门需要使用动态下拉列表，因为每页的下拉列表数量会波动

上下文：

最初我们使用的是标准的引导下拉列表，但我们的客户机处理的一些web提供商没有在引导中加载。我最初的想法是侧向加载，但是，我们使用的模板必须适用于所有客户及其所有web提供商。长话短说，有一些稳定性问题，引导CSS文件覆盖了各种网站，而这些网站并没有考虑到引导

关于问题：

这是我的照片供你看

dropdown = () => {
const dropdown = document.getElementsByClassName("dropdown");
for (let i = 0; i < dropdown.length; i++) {
  const activeDropdown = dropdown[i].id,
        down = "#downChev-" + activeDropdown,
        up = "#upChev-" + activeDropdown,
        downIcon = document.querySelector(down),
        upIcon = document.querySelector(up),
        dropdownNumID = "#" + activeDropdown,
        dropdownID = "#dropdown-" + activeDropdown;

  if (event.target.matches(dropdownNumID)) {
    if (upIcon.classList.contains("show-icon")) {
      upIcon.classList.remove("show-icon");
      downIcon.classList.add("show-icon");
    } else if (downIcon.classList.contains("show-icon")) {
      downIcon.classList.remove("show-icon");
      upIcon.classList.add("show-icon");
    }
    document.querySelector(dropdownID).classList.toggle("dropdown-show")
  }
 }
}

下拉列表=（）=>{
const dropdown=document.getElementsByClassName（“dropdown”）；
for（设i=0；i

目前，我已经建立了一个动态下拉系统，利用每个下拉列表的特定ID。问题在于，在通过下拉列表创建支持变量的第一个循环中，它没有创建activeDropdown变量，而是在记录时返回一个空白变量

我已经在多个场景中排除了故障，并得出以下结论：

在localhost和CodePen中，代码似乎工作正常。一旦添加到实时站点，它在初始化循环中的activeDropdown变量时中断，并在记录时返回一个空白变量

如果我在循环中设置变量后立即删除If条件，并记录activeDropdown变量。很好。这让我相信这可能是一个同步问题。然后，我将if条件转换为它自己的函数，并添加了一个settimeout，允许在新的延迟函数中运行执行项之前初始化变量。添加后，activeDropdown变量的设置不再正确。它只是在登录时返回空白

我不确定我的执行逻辑是否不正确，或者我是否把整个事情复杂化了。这里唯一真正的目标是创建一个动态结构，允许我的前端开发团队随意添加或删除模型div，并随着列表的增长对ID进行简单的修改

---

我们无法访问的其他脚本也有可能在实时站点上创建问题。但是，我想你们会发现我的代码lol有问题。

很难知道发生了什么，因为您的生产环境可能与代码笔非常不同，但我认为可能会发生一些事情

1） 可能是JavaScript在加载整个页面之前运行。确保在页面的最后加载了与CodePen等效的JavaScript代码。（即，将

标记放在文档的最末尾）

2） 有些变量可能相互冲突，因为您直接在全局范围内的文档体中加载JavaScript。我有一些大致的风格建议，可以帮助您解决问题：

通过查看代码笔，您使用了两种不同的方法来对单击事件做出反应：您在

窗口.onclick

上设置了一个带有回调的事件侦听器，以及2）一个名为

dropdown

的函数，该函数附加到HTML中的

onclick

属性

我建议不要使用内联的

onclick

属性，而是在下拉列表的容器中添加一个事件侦听器。这样，您的标记就不会与下拉列表JS耦合，您会听到容器中的点击，而不是整个应用程序。您可以使用相同的事件侦听器打开下拉列表和关闭下拉列表

此外，我建议在代码周围添加包装函数，以防止污染全局范围。该函数可以在页面加载时立即调用，并将在容器上添加事件侦听器

---

这里有一个例子来演示这两个建议。虽然我不知道这是否能帮你解决问题，但希望至少你能学到一些新东西

当然，在任何浏览器上的调试器控制台中都没有错误消息？您是在头中加载JS，还是在哪里，当JS运行时html可能还没有完全加载？没有错误，尽管我没有太多的错误处理方法。我只能访问我们与之打交道的web提供商的body部分。因此，包括JS在内的所有代码都放在主体中。JS脚本也被设置为在按下按钮时启动，因此HTML应该在用户启动按钮按下之前完全加载，我怀疑。或者F12对不起，我想我应该包括控制台错误。。。我不知道为什么我在你最初的提问中忽略了它。“未捕获的DomeException:未能在“元素”上执行“匹配”：“#”不是有效的选择器。“这与代码笔中的JS行12有关，因为activeDropdown变量未初始化。感谢您的建议。”