it-swarm.com.de

Nicht abgerufener TypeError: Die Eigenschaft 'setAttribute' von undefined kann nicht unter Object.onLoad gelesen werden

Irgendwelche Ideen, was diesen Fehler verursachen könnte?

Liste meiner beinhaltet:

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

Skript:

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

Es wird gut dargestellt und alles und keine Fehler beim Laden, nur wenn ich versuche, darauf zu klicken:

 enter image description here

5
Tino

Wir sind mit dem folgenden HTML-Code auf den gleichen Fehler gestoßen:

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

Wir haben versucht, data-toggle="dropdown" vom <select>-Tag zu entfernen. der Fehler trat nicht mehr auf und das Dropdown-Menü funktionierte weiterhin. Nicht sicher warum dies funktioniert, aber es wurde der Fehler für uns beseitigt. Muss irgendwie ein Konflikt sein? Wenn eine andere Person nach einer Lösung sucht, kann diese Problemumgehung für sie funktionieren.

5
Purple Lady

Das Entfernen von data-toggle = "dropdown" hat bei mir nicht funktioniert, da Bootstrap 4.x das für Dropdown-Menüs benötigt.

In einem ähnlichen Fall stellte ich jedoch fest, dass das von mir verwendete Plugin eines Drittanbieters eine entfernte Funktion namens removeAttr aufweist. Als ich es mit Stütze änderte, arbeitete ich. Kein Fehler mehr.

1
S. Mert

CSS Frameworks

Zunächst müssen Sie wählen, ob Sie Bootstrap 4 oder Semantic-UI verwenden, da es sich hierbei um zwei verschiedene CSS-Frameworks handelt, deren Verwendung ein Chaos ist.

Bootstrap 4

Wenn Sie sich für Bootstrap 4 entscheiden, da es einfacher und leichter zu erlernen ist, insbesondere für Anfänger (natürlich können Sie Semantic-UI, Foundation oder andere wählen, wenn Sie möchten), sollten Sie diese beiden Skripts in Ihrem Code haben: jQuery und Popper.js.

Aus Bootstraps-Dokumentation :

Viele unserer Komponenten erfordern die Verwendung von JavaScript. Sie benötigen insbesondere jQuery, Popper.js und unsere eigenen JavaScript-Plugins.


Dropdown

Wieder, wie Sie in docs finden können:

Dropdowns basieren auf einer Drittanbieter-Bibliothek, Popper.js, die dynamische Positionierung und Ansichtsfenstererkennung ermöglicht. Stellen Sie sicher, dass Sie popper.min.js vor Bootstraps JavaScript angeben, oder verwenden Sie bootstrap.bundle.min.js/bootstrap.bundle.js, die Popper.js enthält. Popper.js wird nicht zum Positionieren von Dropdowns in Navigationsleisten verwendet, obwohl keine dynamische Positionierung erforderlich ist.

Wenn Sie entscheiden, welches CSS-Framework Sie verwenden möchten, können Sie Ihre Dropdowns richtig einstellen. Um einen besseren Standpunkt zu haben, sollten Sie auch die Semantic-UI-Dokumentation zu Dropdown betrachten.


NodeJS-Umgebung! = Browser-JavaScript-Umgebung

Wie ich sehen kann, installieren Sie Ihre Skripte über npm, aber ich bin mir jetzt sicher, ob es von Ihnen beabsichtigt ist. In Kürze:

npm ist ein Paketmanager für Node.js-Pakete

Ich vermute, dass Sie versuchen, einfache Versionen dieser Pakete nur in Ihren lokalen Ordnern wie ./project_name/javascript/bootstrap.js oder ./project_name/css/bootstrap.min.css zu haben, und Sie brauchen jetzt node_modules nicht. Aber natürlich können Sie es auch so haben, wenn Sie möchten.

Sie finden viele nützliche Kommentare zu Node und JavaScript hier .

1
robertgrzonka

Halten Sie den SemanticUI-Link unter dem Bootstrap-Link

<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