未捕获的类型错误：无法读取 Object.onLoad 处未定义的属性“setAttribute”

Question

任何想法可能导致此错误？

我的包含列表：

<link rel="stylesheet" href="../../node_modules/semantic-ui/dist/semantic.min.css">
<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../node_modules/fullcalendar/dist/fullcalendar.min.css">
<script src="../../node_modules/semantic-ui/dist/semantic.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/moment/min/moment.min.js"></script>
<script src="../../node_modules/fullcalendar/dist/fullcalendar.min.js"></script>

HTML 元素：

<div class="ui floating dropdown labeled search icon button" style="width: 95%; margin: 0 auto;" id="monthDrop">
    <i class="calendar icon"></i>
    <span class="text">Choose a Month</span>
    <div class="menu">
                <div class="item">January</div>
                <div class="item">February</div>
                <div class="item">March</div>
                <div class="item">April</div>
                <div class="item">May</div>
                <div class="item">June</div>
                <div class="item">July</div>
                <div class="item">August</div>
                <div class="item">September</div>
                <div class="item">October</div>
                <div class="item">November</div>
                <div class="item">December</div>
    </div>
</div>

脚本：

$('#monthDrop').dropdown();

它渲染得很好，加载时一切都没有错误，当我尝试点击它时就是这样：

Answer 1

CSS Frameworks

首先你必须选择是使用Bootstrap 4还是Semantic-UI，因为它们是两个不同的CSS框架，使用它们都是一团糟。

引导程序 4

假设您选择 Bootstrap 4，因为它更简单、更容易学习，尤其是对于初学者来说（当然，如果您愿意，您可以选择 Semantic-UI、Foundation 或任何其他），您应该在代码中包含以下两个脚本： jQuery 和 Popper.js。

来自Bootstraps Documentation：

我们的许多组件都需要使用 JavaScript 才能运行。具体来说，它们需要 jQuery、Popper.js 和我们自己的 JavaScript 插件。

---

Dropdown

同样，您可以在文档中找到：

下拉菜单基于第三方库 Popper.js 构建，该库提供动态定位和视口检测。请务必在 Bootstrap 的 JavaScript 之前包含 popper.min.js 或使用包含 Popper.js 的 bootstrap.bundle.min.js / bootstrap.bundle.js。尽管不需要动态定位，但 Popper.js 不用于在导航栏中定位下拉菜单。

当您决定要使用哪个 CSS 框架时，您将能够以适当的方式设置您的 Dropdowns。为了获得更好的观点，您还应该查看Semantic-UI Documentation about Dropdown.

---

NodeJS 环境！= 浏览器 JavaScript 环境

我可以看到您通过npm 安装脚本，但我现在确定它是否是您想要的。简而言之：

npm 是 Node.js 包的包管理器

我猜你想要做的是在你的本地文件夹中拥有这些包的简单版本，比如./project_name/javascript/bootstrap.js 或./project_name/css/bootstrap.min.css，你现在不需要node_modules。但是，如果你愿意，当然你也可以这样。

你可以找到很多关于 Node 和 JavaScript here 的有用的 cmets。

Answer 2

我们在下面的 html 中遇到了同样的错误：

<select class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" role="button" v-model="selected" aria-haspopup="true" aria-expanded="false">
    <option disabled value="">Please select one</option>
    <option class="dropdown-item" value="type1">Carrier</option>
    <option class="dropdown-item" value="type2">Shipper</option>
</select>

我们尝试从<select> 标记中删除data-toggle="dropdown"；错误不再发生，下拉菜单仍然有效。不确定为什么这有效，但它为我们消除了错误。一定是某种冲突？无论如何，如果其他人正在寻找解决方案，这种解决方法可能对他们有用。

Answer 3

将语义UI链接保留在引导程序下方

<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../node_modules/semantic-ui/dist/semantic.min.css">
<link rel="stylesheet" href="../../node_modules/fullcalendar/dist/fullcalendar.min.css">

Answer 4

删除 data-toggle="dropdown" 对我不起作用，因为 Bootstrap 4.x 需要下拉菜单。

但是在类似的问题中，我发现我使用的第三方插件有一个名为 removeAttr 的已删除函数。当我用道具改变它时，我工作了。没有更多错误。

Answer 5

我在 Bootstrap 4.x 中遇到了同样的错误，因为我的下拉菜单与我使用的下拉按钮的父级不同。

<span class="project-sort-by">Sort by: <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a></span>

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>

这不起作用，因为 dropdown.js 代码使用此代码查找菜单：

  _getMenuElement() {
    if (!this._menu) {
      const parent = Dropdown._getParentFromElement(this._element)

      if (parent) {
        this._menu = parent.querySelector(SELECTOR_MENU)
      }
    }
    return this._menu
  }

要解决此问题，请移动菜单，使其与切换具有相同的父级。

<span class="project-sort-by">Sort by: 
    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</span>

Answer 6

发生错误是因为您放错了元素。上面的答案都没有为我解决。

放置错误 1

<span class="project-sort-by">Sort by: <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a></span>

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>

放置错误 2

<span class="project-sort-by">Sort by: 
    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</span>

正确的位置

<span class="dropdown project-sort-by">Sort by: 
    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</span>