JavaScriptのclassListが動作しない

javascriptに関して質問です。
変数を定義し、プロパティでclassListを使いいろいろ動作をさせたいのですが、"main.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
at HTMLDivElement.<anonymous>"というエラーを吐かれてしない動作しないという状況です。
調べてみたもののあまりぴんとこず、どなたかお力を貸していただけたらと思います。

HTML
1<header id="header" class="wrapper">

JavaScript
1let elements = document.getElementById('header')
2      console.log(elements[0]); //動かない
3    if (elements[0].classList.contains('open') === true ){
4      elements[0].classList.remove('open');　//動かない
5    }

toradora

2022/04/25 10:00

HTMLを全文追記しておきます。作成しているのは練習用のサイトです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Furniture Design</title> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="midium1.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="./main.js"></script> </head> <body cz-shortcut-listen="true"> <header id="header" class="wrapper"> <div class="title-logo"> <a href="#"> <img src="https://code-step.com/demo/html/store2/img/logo.svg" alt="title-logo"> </a> </div> <nav> <ul> <li><a href="#">PRODUCTS</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">COMPANY</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> <div class="toggle_btn"> <span></span> <span></span> </div> <div id="mask"></div> </header> <main> <div id="top" class="wrapper"> <ul> <li> <a href="#"> <img src="https://code-step.com/demo/html/store2/img/item1.jpg" alt="image1"> <p>プロダクトタイトルプロダクトタイトル</p> <p>¥99,999 +tax</p> </a> </li> <li> <a href="#"> <img src="https://code-step.com/demo/html/store2/img/item2.jpg" alt="image2"> <p>プロダクトタイトルプロダクトタイトル</p> <p>¥99,999 +tax</p> </a> </li> <li> <a href="#"> <img src="https://code-step.com/demo/html/store2/img/item3.jpg" alt="image3"> <p>プロダクトタイトルプロダクトタイトル</p> <p>¥99,999 +tax</p> </a> </li> <li> <a href="#"> <img src="https://code-step.com/demo/html/store2/img/item4.jpg" alt="image4"> <p>プロダクトタイトルプロダクトタイトル</p> <p>¥99,999 +tax</p> </a> </li> <li> <a href="#"> <img src="https://code-step.com/demo/html/store2/img/item5.jpg" alt="image5"> <p>プロダクトタイトルプロダクトタイトル</p> <p>¥99,999 +tax</p> </a> </li> <li> <a href="#"> <img src="https://code-step.com/demo/html/store2/img/item6.jpg" alt="image6"> <p>プロダクトタイトルプロダクトタイトル</p> <p>¥99,999 +tax</p> </a> </li> <li> <a href="#"> <img src="https://code-step.com/demo/html/store2/img/item7.jpg" alt="image7"> <p>プロダクトタイトルプロダクトタイトル</p> <p>¥99,999 +tax</p> </a> </li> <li> <a href="#"> <img src="https://code-step.com/demo/html/store2/img/item8.jpg" alt="image8"> <p>プロダクトタイトルプロダクトタイトル</p> <p>¥99,999 +tax</p> </a> </li> </ul> <a class="link-text" href="#">View More</a> </div> </main> <footer id="footer" class="wrapper"> <ul> <li>INSTAGRAM</li> <li>TWITTER</li> <li>FACEBOOK</li> </ul> <p>© Furniture Design</p> </footer> </body> </html> これに対し、yambejpさんの以下のjsを動作させようとしていますが、"main.js:3 Uncaught TypeError: Cannot read properties of null (reading 'classList') at main.js:3:9"のエラーが吐かれるという状況です。 let element = document.getElementById('header'); console.log(element); element.classList.toggle('open'); console.log(element); element.classList.toggle('open'); console.log(element);

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

回答2件

document.getElementById() は単一の要素か null を返すので、elements[0] という使い方はできません。elements でよいです。

投稿2022/04/25 08:03

int32_t

総合スコア20941

m.ts10806

2022/04/25 08:20

細かいですが実態と合わないので変数名も見直したほうが良さそうですね。　 element"s"

toradora

2022/04/26 06:27

getElementsByClassnameと混同していました。ありがとうございます。

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

ベストアンサー

javascript
1<header id="header" class="wrapper"></header>
2<script>
3let element = document.getElementById('header');
4console.log(element.outerHTML);
5element.classList.toggle('open');
6console.log(element.outerHTML);
7element.classList.toggle('open');
8console.log(element.outerHTML);
9</script>