appendchildのエラー

こちら実行すると下記のエラーが出ます。

Cannot read property 'appendChild' of null　at HTMLButtonElement.<anonymous>

原因について教えていただけますでしょうか。

html
1<body>
2    <ol ids="lists">
3        <li>a</li>
4        <li>a</li>
5        <li>a</li>
6    </ol>
7    <button id="button">more</button>
8
9    <script src="index.js"></script>
10</body>

JavaScript
1const btn  = document.getElementById("button");
2const lists = document.getElementById("lists");
3
4btn.addEventListener("click", function(){
5　　const list = document.createElement("li");
6    list.innerText = "oo"
7    lists.appendChild(list);
8    console.log(list);
9});

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

回答2件

ベストアンサー

<ol ids="lists">

ids → id です。

投稿2021/02/09 09:22

int32_t

総合スコア21679

nf10131999

2021/02/09 10:58

すいません、確認不足でした。ありがとうございます。

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

エラーを読んだうえで、デバッグしてほしい

js
1const btn  = document.getElementById("button");
2const lists = document.getElementById("lists");
3
4console.log(btn);
5console.log(lists );
6

Cannot read property 'appendChild' of null　

nullのプロパティ 'appendChild'を読み取れません

投稿2021/02/09 10:12

m.ts10806

総合スコア80875

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

appendchildのエラー

関連した質問