Javascriptを外部化したいです

###インラインで組み込んだJavascriptを外部化したいです
HTMLでクラスのみで作ったリストで、
5行あるうち、2つ目と4つ目を非表示にしたく、インラインでは下記コードで成功しているのですが、外部化するとエラーになります

インラインでのコード

<body>
    <!-- **パンくずリスト-->
<nav class="breadcrumb">
    <ol class="breadcrumb__list">
    <li class="breadcrumb__listItem"><a href="/">カテゴリー1</a></li>
    <li class="breadcrumb__listItem"><a href="category">カテゴリー2</a></li>
    <li class="breadcrumb__listItem"><a href="category">カテゴリー3</a></li>
    <li class="breadcrumb__listItem"><a href="category">カテゴリー4</a></li>
    <li class="breadcrumb__listItem">カテゴリー5</li>
    </ol>
</nav>
    <!-- **パンくずリスト-->

<script type="text/javascript">
const pan = document.getElementsByClassName('breadcrumb__listItem');
pan[1].remove();
pan[2].remove();
</script>
</body>

1.カテゴリー1
3.カテゴリー3
5.カテゴリー5

と表示には成功しています

下記のように外部化しました

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="pan.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- **パンくずリスト-->
<nav class="breadcrumb">
    <ol class="breadcrumb__list">
    <li class="breadcrumb__listItem"><a href="/">カテゴリー1</a></li>
    <li class="breadcrumb__listItem"><a href="category">カテゴリー2</a></li>
    <li class="breadcrumb__listItem"><a href="category">カテゴリー3</a></li>
    <li class="breadcrumb__listItem"><a href="category">カテゴリー4</a></li>
    <li class="breadcrumb__listItem">カテゴリー5</li>
    </ol>
</nav>
    <!-- **パンくずリスト-->
</body>

pan.js

const pan = document.getElementsByClassName('breadcrumb__listItem');
pan[1].remove();
pan[2].remove();

コンソールエラー

pan.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'remove')
at pan.js:2

エラーなので表示も
1.カテゴリー1
2.カテゴリー2
3.カテゴリー3
4.カテゴリー4
5.カテゴリー5

とjavascriptが効いてないです。

Javascript初心者です。

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

head内に配置すると対象の要素が画面上に存在する前に動くので、要素が見つからずエラーとなります。
コンテンツロードのイベントを挟むか、</body>の前に配置してください。
別ファイルにしても、結局はそこを読み込んだ時に実行されるのでそういった配慮が必要となります。

投稿2021/12/29 03:05

m.ts10806

総合スコア80875

dboy

2021/12/29 03:17

なるほど、先にjsを組み込んだことが原因だったのですね </body>の前に配置したところうまくいきましたありがとうございます

m.ts10806

2021/12/29 03:40

>先にjsを組み込んだことが原因だったのですねいえ、回答に書いたように「対象の要素が読み込まれる前に動作するように組んでいることが問題」です。先に組み込んでも回答に書いたようにコンテンツロード時のイベント内で要素を参照するようにすればちゃんと操作できます。

dboy

2021/12/29 04:21

希望としましてはheader内に組み込みたいと考えております。どういう記述をついかすればよろしいでしょうか

m.ts10806

2021/12/29 04:44

回答にリンク貼ってますよ。

dboy

2021/12/29 06:13

リンクになっていたのですね、失礼しました。今回初めての質問なので気が付きませんでした試してみます

m.ts10806

2021/12/29 06:24

失礼、それは配慮が足りませんでした。「マークダウン」と言われる記法で書かれてるので、質問の感じからおそらくある程度理解されてるとは思いますが、一応確認しておいてもらえたらと。 https://teratail.com/help#about-markdown

dboy

2022/01/02 04:35

教えて頂いたリンクを参考に下記のように記述し、headに外部のjsファイルを読み込んだところ ``` <head> <script type="text/javascript" src="pan.js"></script> </head> <body> <nav class="breadcrumb"> <ol class="breadcrumb__list"> <li class="breadcrumb__listItem"><a href="/">カテゴリー1</a></li> <li class="breadcrumb__listItem"><a href="/">カテゴリー2</a></li> <li class="breadcrumb__listItem"><a href="/">カテゴリー3</a></li> <li class="breadcrumb__listItem"><a href="/">カテゴリー4</a></li> <li class="breadcrumb__listItem">カテゴリー5</li> </ol> </nav> </body> ``` pan.js ``` window.addEventListener('DOMContentLoaded', (event) => { const pan = document.getElementsByClassName('fs-c-breadcrumb__listItem'); pan[1].remove(); pan[2].remove(); }); ``` カテゴリー1 カテゴリー3 カテゴリー5 と表示することができました。希望通りの表示ができましたが、これであっていますでしょうか

行動規範の内容に同意します