web-dev-qa-db-fra.com

Uncaught TypeError: Impossible de lire la propriété 'setAttribute' de undefined dans Object.onLoad

Des idées sur ce qui pourrait causer cette erreur?

Liste de mes inclus:

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

Elément 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>

Scénario:

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

Il rend bien et tout et pas d'erreurs sur charge, juste quand j'essaie de cliquer dessus:

 enter image description here

javascriptbootstrap-4dropdownsemantic-uipopper.js
5
Tino

Nous avons rencontré la même erreur avec le code HTML suivant:

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

Nous avons essayé de supprimer data-toggle="dropdown" de la balise <select>; l'erreur ne s'est plus produite et le menu déroulant fonctionnait toujours. Pas sûr pourquoi cela fonctionne, mais cela nous a permis d'éliminer l'erreur. Doit être un conflit en quelque sorte? Quoi qu'il en soit, si quelqu'un d'autre recherche une solution, cette solution de contournement peut fonctionner pour eux.

5
Purple Lady

Frameworks CSS

Tout d’abord, vous devez choisir si vous utilisez Bootstrap 4 ou Semantic-UI, car il s’agit de deux frameworks CSS différents et leur utilisation est un véritable gâchis.

Bootstrap 4

En supposant que vous choisissiez Bootstrap 4 car il est plus simple et plus facile à apprendre, en particulier pour les débutants (vous pouvez bien entendu choisir Semantic-UI, Foundation ou toute autre, si vous le souhaitez), vous devriez avoir ces deux scripts dans votre code: jQuery et Popper.js.

De Documentation Bootstraps :

Beaucoup de nos composants nécessitent l'utilisation de JavaScript pour fonctionner. Plus précisément, ils requièrent jQuery, Popper.js et nos propres plugins JavaScript.

Dropdown

Encore une fois, comme vous pouvez le trouver dans la documentation:

Les listes déroulantes reposent sur une bibliothèque tierce, Popper.js, qui fournit un positionnement dynamique et une détection des vues. Assurez-vous d’inclure popper.min.js avant le code JavaScript de Bootstrap ou utilisez bootstrap.bundle.min.js/bootstrap.bundle.js qui contient Popper.js. Popper.js n’est pas utilisé pour positionner des listes déroulantes dans des barres de navigation, car le positionnement dynamique n’est pas requis.

Lorsque vous décidez quel framework CSS vous souhaitez utiliser, vous pouvez définir votre Dropdowns de manière appropriée. Juste pour avoir un meilleur point de vue, vous devriez également regarder dans la documentation de Semantic-UI sur le menu déroulant.

NodeJS Environment! = Environnement JavaScript du navigateur

Comme je peux le voir, vous installez vos scripts avec npm, mais je suis maintenant sûr que cela est prévu par vous. En abrégé:

npm est un gestionnaire de paquets pour les paquets Node.js

Je suppose que ce que vous essayez de faire est d’avoir des versions simples de ces paquetages uniquement dans vos dossiers locaux comme ./project_name/javascript/bootstrap.js ou ./project_name/css/bootstrap.min.css et il n’est pas nécessaire pour vous d’avoir node_modules. Mais, encore une fois, vous pouvez l'avoir comme ceci si vous le souhaitez.

Vous pouvez trouver beaucoup de commentaires utiles sur Node et JavaScript ici .

1
robertgrzonka

Gardez le lien semanticUI en dessous du bootstrap

<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
Jayesh Nambiar