カラーピッカー

### 実現したいことコンソールに「null」ではなく「」と表示させたいです。 ### 発生している問題・分からないことコンソールに「」と表示されるはずが「null」と表示されてしまいます。 ### エラーメッセージ ```error null ※エラーは出ませんが「null」と表示されます。 ``` ### 該当のソースコード ```JavaScript console.log(document.querySelector('#colorPicker')); ``` ### 試したこと・調べたこと - [x] teratailやGoogle等で検索した - [x] ソースコードを自分なりに変更した - [ ] 知人に聞いた - [ ] その他 ##### 上記の詳細・結果 ChatGPTに「console.log(document.querySelector('#colorPicker'));」と入力したら「`console.log(document.querySelector('#colorPicker'));` の実行自体には文法的なエラーはありませんが、以下のような点に注意が必要です。 **: `#colorPicker` というIDを持つ要素がHTMLに存在しない場合、`querySelector`は `null`を返します。この場合、コンソールに `null`と表示されます。」と返ってきました。「colorPicker」はHTML（index.html）からコピペしたので、スペルミスは無いと思います。 ### 補足【HTML（index.html）のコード】カラーピッカー

カラーコードを検索

【CSS（css/style.css）のコード】 @charset "UTF-8"; body { text-align: center; font-family: sans-serif; display: grid; place-items: center; height: 100vh; background-color: #000; } div { background-color: #fff; padding: 2rem; border-radius: 1rem; box-shadow: 0 0 1rem rgba(0,0,0,.5); } 【JavaScript（js/script.js）のコード】 console.log(document.querySelector('#colorPicker')); ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-10-14/7ec3bf68-e5f2-4ed7-a058-ddecb1013ede.jpeg) ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-10-14/0cdd7ab8-8bea-4b16-8e94-8a30437a3d48.jpeg) ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-10-14/7c87037a-ab32-4814-8b68-79b67d22b29b.jpeg) ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-10-14/efea44d0-c3dc-48b9-b9d8-cbe69851d075.jpeg)