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

Uncaught TypeError: Cannot read property 'setAttribute' of undefined at Object.onLoad

提问by Tino

Any ideas what might be causing this error?

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

List of my includes:

我的清单包括：

<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 Element:

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>

Script:

脚本：

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

It renders fine and everything and no errors on load, just this when I try to click on it:

它呈现良好，一切正常，加载时没有错误，当我尝试单击它时，仅此而已：

回答by Purple Lady

We ran into the same error with the following html:

我们在使用以下 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>

We tried removing data-toggle="dropdown"from the <select>tag; the error no longer occurred, and the dropdown menu still functioned. Not sure whythis works, but it got rid of the error for us. Must be a conflict somehow? Anyways, if someone else is looking for a solution, this workaround may work for them.

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

回答by robertgrzonka

CSS Frameworks

CSS 框架

First of all you have to choose whether you're using Bootstrap 4or Semantic-UI, because these are two different CSS Frameworks and using both of them is a mess.

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

Bootstrap 4

引导程序 4

Assuming you choose Bootstrap 4 as it's simpler and easier to learn especially for the beginners (but of course you can choose Semantic-UI, Foundation or any other if you'd like) you should have these two scripts inside your code: jQueryand Popper.js.

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

From Bootstraps Documentation:

来自Bootstraps 文档：

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins.

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

---

---

Dropdown

Dropdown

Again, as you can find in docs:

同样，正如您可以在文档中找到的那样：

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap's JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.

下拉列表建立在第三方库 Popper.js 之上，该库提供动态定位和视口检测。确保在 Bootstrap 的 JavaScript 之前包含 popper.min.js 或使用包含 Popper.js 的 bootstrap.bundle.min.js / bootstrap.bundle.js。尽管不需要动态定位，但 Popper.js 不用于在导航栏中定位下拉列表。

When you decide which CSS Framework you'd like to use you'll be able to set your Dropdownsin a proper way. Just to have better point of view you should also look into Semantic-UI Documentation about Dropdown.

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

---

---

NodeJS Environment != Browser JavaScript Environment

NodeJS 环境 != 浏览器 JavaScript 环境

As I can see you install your scripts through npm, but I'm now sure if it is intended by you. In shorthand:

正如我所看到的，您通过 安装脚本npm，但我现在确定它是否是您的意图。简而言之：

npmis a package manager for Node.js packages

npm是 Node.js 包的包管理器

I'm guessing that what you're trying to do is to have simple versions of these packages just in your local folders like ./project_name/javascript/bootstrap.jsor ./project_name/css/bootstrap.min.cssand there's no need for you right now to have node_modules. But, again, of course you can have it like this if you'd like.

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

You can find a lot of useful comments about Node and JavaScript here.

您可以在此处找到许多关于 Node 和 JavaScript 的有用评论。

回答by S. Mert

Removing data-toggle="dropdown" did not work for me as Bootstrap 4.x requires that for dropdown menus.

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

However in a similar issue, I figured that the third party plugin I used had a removed function called removeAttr. When I changed it with prop I worked. No more error.

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

回答by Jayesh Nambiar

Keep the semanticUI link below the bootstrap one

将semanticUI 链接保留在引导程序一下方

<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">