Uncaught TypeError: Невозможно прочитать свойство 'setAttribute' из неопределенного в Object.onLoad

Question

Uncaught TypeError: Невозможно прочитать свойство 'setAttribute' из неопределенного в Object.onLoad

Есть идеи, что может быть причиной этой ошибки?

Список моих включает в себя:

<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();

Он рендерится нормально и все без ошибок при загрузке, только это, когда я пытаюсь нажать на него:

20

javascript bootstrap-4 dropdown semantic-ui popper.js

Источник

user8098926 24 июн '18 в 03:40

3 ответа

Другие вопросы по тегам javascript bootstrap-4 dropdown semantic-ui popper.js

user4076116 03 авг '18 в 14:50 2018-08-03 14:50 · Answer 1 · 2018-08-03 14:50

Мы столкнулись с той же ошибкой со следующим 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>

Мы пытались удалить data-toggle="dropdown" от <select> тег; ошибка больше не возникала, а раскрывающееся меню по-прежнему функционировало. Не уверен, почему это работает, но это избавило нас от ошибки. Должен ли быть конфликт как-то? В любом случае, если кто-то ищет решение, этот обходной путь может работать для них.

user45979 18 авг '20 в 06:17 2020-08-18 06:17 · Answer 2 · 2020-08-18 06:17

Я получил ту же ошибку в 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>

user9358107 24 июн '18 в 04:31 2018-06-24 04:31 · Answer 3 · 2018-06-24 04:31

CSS рамки

Прежде всего, вы должны выбрать, используете ли вы Bootstrap 4 или же Semantic-UI потому что это две разные CSS-фреймворки, и их использование - беспорядок.

Bootstrap 4

Предполагая, что вы выбираете Bootstrap 4, поскольку его проще и легче изучать, особенно для начинающих (но, конечно, вы можете выбрать Semantic-UI, Foundation или любой другой, если хотите), у вас должны быть эти два скрипта внутри кода: jQuery и Popper.js.

Из документации по начальной загрузке:

Многие из наших компонентов требуют использования JavaScript для работы. В частности, они требуют jQuery, Popper.js и наших собственных плагинов JavaScript.

`Dropdown`

Опять же, как вы можете найти в документах:

Dropdowns построены на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение области просмотра. Не забудьте включить popper.min.js перед JavaScript Bootstrap или использовать bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js. Popper.js не используется для размещения выпадающих списков на панелях навигации, хотя динамическое позиционирование не требуется.

Когда вы решите, какой CSS Framework вы хотите использовать, вы сможете настроить свой Dropdowns надлежащим образом. Просто, чтобы иметь лучшую точку зрения, вы должны также изучить документацию Semantic-UI о Dropdown.

Среда NodeJS!= Среда браузера JavaScript

Как я вижу, вы устанавливаете свои скрипты через npm, но теперь я уверен, что это задумано вами. Вкратце:

npm - менеджер пакетов для пакетов Node.js.

Я предполагаю, что вы пытаетесь сделать простые версии этих пакетов просто в ваших локальных папках, таких как ./project_name/javascript/bootstrap.js или же ./project_name/css/bootstrap.min.css и вам сейчас не нужно иметь node_modules, Но, опять же, конечно, вы можете иметь это так, если хотите.

Вы можете найти много полезных комментариев о Node и JavaScript здесь.

user7067655 24 ноя '20 в 23:41 2020-11-24 23:41 · Answer 4 · 2020-11-24 23:41

Ошибка возникает из-за неправильной установки элементов. Ни один из приведенных выше ответов не решил для меня.

Неправильное размещение 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>

user4363167 04 май '19 в 18:55 2019-05-04 18:55 · Answer 5 · 2019-05-04 18:55

Удаление data-toggle="dropdown" не сработало для меня, так как Bootstrap 4.x требует этого для выпадающих меню.

Однако в аналогичной проблеме я подумал, что у стороннего плагина, который я использовал, была удаленная функция с именем removeAttr. Когда я изменил его с помощью пропеллера, я работал. Нет больше ошибок.

user10695497 23 ноя '18 в 12:14 2018-11-23 12:14 · Answer 6 · 2018-11-23 12:14

Держите ссылку на 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">

0

Источник

user10695497 23 ноя '18 в 12:14