web-dev-qa-db-ja.com

キャッチされないTypeError：Object.onLoadで未定義のプロパティ 'setAttribute'を読み取ることができません

このエラーの原因は何ですか？

私のインクルードのリスト：

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

それはうまくレンダリングされ、ロード時のエラーはありません。クリックしようとすると次のようになります。

enter image description here

javascriptbootstrap-4dropdownsemantic-uipopper.js
8
Tino

次の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>を削除しようとしました。エラーは発生しなくなり、ドロップダウンメニューは引き続き機能しました。確かではありませんwhyこれは動作しますが、エラーを取り除きました。どういうわけか、競合する必要がありますか？とにかく、他の誰かが解決策を探している場合、この回避策は彼らのために働くかもしれません。

6
Purple Lady

Data-toggle = "dropdown"の削除は、Bootstrap 4.xではドロップダウンメニューで必要になるため、機能しませんでした。

ただし、同様の問題で、使用したサードパーティのプラグインにremoveAttrと呼ばれる削除された関数があると考えました。小道具でそれを変更したとき、私は働きました。これ以上のエラーはありません。

1
S. Mert

CSSフレームワーク

まず、Bootstrap 4またはSemantic-UIのどちらを使用するかを選択する必要があります。これらは2つの異なるCSSフレームワークであり、両方を使用するのは面倒だからです。

ブートストラップ4

Bootstrap 4を選択すると仮定すると、初心者にとっては特にシンプルで簡単に学ぶことができます（もちろん、必要に応じてSemantic-UI、Foundationなどを選択できます））コード内の2つのスクリプト：jQueryおよびPopper.js.

から Bootstraps Documentation ：

コンポーネントの多くは、機能するためにJavaScriptを使用する必要があります。具体的には、jQuery、Popper.js、および独自のJavaScriptプラグインが必要です。

Dropdown

繰り返しますが、ドキュメントで見つけることができます：

ドロップダウンは、ダイナミックポジショニングとビューポート検出を提供するサードパーティライブラリPopper.js上に構築されます。 BootstrapのJavaScriptの前に必ずpopper.min.jsを含めるか、Popper.jsを含むbootstrap.bundle.min.js/bootstrap.bundle.jsを使用してください。 Popper.jsは、ダイナミックポジショニングが必要ないため、ナビゲーションバーでのドロップダウンの配置には使用されません。

使用するCSSフレームワークを決定すると、適切な方法でDropdownsを設定できるようになります。より良い視点を得るために、ドロップダウンに関する Semantic-UIドキュメントも参照する必要があります。

NodeJS環境！=ブラウザJavaScript環境

ご覧のとおり、npmを使用してスクリプトをインストールしますが、これが意図したものかどうかは確かです。速記で：

npmはNode.jsパッケージのパッケージマネージャーです

あなたがやろうとしているのは、./project_name/javascript/bootstrap.jsや./project_name/css/bootstrap.min.cssのようなローカルフォルダにこれらのパッケージのシンプルなバージョンを置くことであり、node_modulesを持つ必要は今のところないと思います。しかし、もちろん、必要に応じてこのようにすることもできます。

NodeおよびJavaScript here）に関する多くの有用なコメントを見つけることができます 。

1
robertgrzonka

セマンティックUIリンクをbootstrap one

<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