Javascript 未捕获的TypeError:无法在Object.onLoad读取未定义的属性“setAttribute”
你知道是什么导致了这个错误吗 我的名单包括:Javascript 未捕获的TypeError:无法在Object.onLoad读取未定义的属性“setAttribute”,javascript,bootstrap-4,dropdown,semantic-ui,popper.js,Javascript,Bootstrap 4,Dropdown,Semantic Ui,Popper.js,你知道是什么导致了这个错误吗 我的名单包括: <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_
<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>
它渲染得很好,加载时没有任何错误,只是当我尝试单击它时:
首先,您必须选择是使用Bootstrap4还是语义UI,因为这是两个不同的CSS框架,同时使用这两个框架简直是一团糟
引导程序4
假设您选择Bootstrap 4,因为它更简单,更容易学习,尤其是初学者,但是当然,如果您希望在代码中有这两个脚本:jQuery和PopP.js.
,您可以选择语义UI、基础或任何其他。 发件人: 我们的许多组件都需要使用JavaScript才能正常工作。具体来说,它们需要jQuery、Popper.js和我们自己的JavaScript插件 同样,您可以在文档中找到: 下拉列表构建在第三方库Popper.js上,该库提供动态定位和视口检测。确保在Bootstrap的JavaScript之前包含popper.min.js,或者使用包含popper.js的Bootstrap.bundle.min.js/Bootstrap.bundle.js。虽然不需要动态定位,但Popper.js不用于在导航栏中定位下拉列表 当您决定使用哪个CSS框架时,您将能够以适当的方式设置下拉列表。为了有更好的观点,你还应该研究 NodeJS环境!=浏览器JavaScript环境 正如我看到的,您可以通过npm安装脚本,但我现在可以确定它是否是您想要的。简而言之: npm是Node.js包的包管理器 我猜您要做的是将这些包的简单版本放在本地文件夹中,比如./project\u name/javascript/bootstrap.js或./project\u name/css/bootstrap.min.css,而您现在不需要节点模块。但是,同样,如果你愿意,你当然可以这样做您可以找到许多关于Node和JavaScript的有用注释。我们在以下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>
我们尝试从标记中删除数据切换=下拉列表;错误不再发生,下拉菜单仍能正常工作。不知道为什么会这样,但它为我们消除了错误。一定是冲突吧?无论如何,如果其他人正在寻找解决方案,此解决方法可能对他们有效。将Semanticu链接保留在引导链接下方
<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">
删除data toggle=dropdown对我不起作用,因为Bootstrap 4.x要求下拉菜单使用该选项
然而,在一个类似的问题中,我发现我使用的第三方插件有一个被删除的函数removeAttr。当我用道具换的时候,我工作了。没有更多错误。我在Bootstrap 4.x中遇到了同样的错误,因为我的下拉菜单没有与我使用的下拉按钮相同的父菜单 排序方式:
发生错误的原因是您将元素放错了位置。上面的答案没有一个能为我解答 错误位置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>
看起来问题可能出在popper.js中,它似乎是由dropdown.js调用的,根据您发布的代码,您似乎都没有加载它们-因此,这本身就很神秘。谢谢,这可能是您花了一整晚的事情之一
<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>