Uncaught TypeError: Cannot read property 'setAttribute' of undefined at Object.onLoad
Solution 1
We ran into the same error with the following 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 why this 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.
Solution 2
I got this same error in Bootstrap 4.x because my dropdown menu did not have the same parent as the dropdown button I was using.
<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>This does not work because the dropdown.js code looks for the menu using this code:
_getMenuElement() {
if (!this._menu) {
const parent = Dropdown._getParentFromElement(this._element)
if (parent) {
this._menu = parent.querySelector(SELECTOR_MENU)
}
}
return this._menu
}To fix this, move the menu so it has the same parent as the toggle.
<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>Solution 3
CSS Frameworks
First of all you have to choose whether you're using Bootstrap 4 or Semantic-UI, because these are two different CSS Frameworks and using both of them is a mess.
Bootstrap 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: jQuery and Popper.js.
From Bootstraps Documentation:
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins.
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.
When you decide which CSS Framework you'd like to use you'll be able to set your Dropdowns in a proper way. Just to have better point of view you should also look into Semantic-UI Documentation about Dropdown.
NodeJS Environment != Browser JavaScript Environment
As I can see you install your scripts through npm, but I'm now sure if it is intended by you. In shorthand:
npm is a package manager for Node.js packages
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.js or ./project_name/css/bootstrap.min.css and 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.
You can find a lot of useful comments about Node and JavaScript here.
Solution 4
The error happens because you are misplacing the elements. None of the answer above solved for me.
Wrong placement 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>
Wrong placemement 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>
Right placement
<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>
Solution 5
Removing data-toggle="dropdown" did not work for me as Bootstrap 4.x requires that for dropdown menus.
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.
Comments
-
Tino almost 2 years
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:
<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:
