実現したいこと

コンソールに「null」ではなく
「<input id="colorPicker" type="color">」
と表示させたいです。

発生している問題・分からないこと

コンソールに「<input id="colorPicker" type="color">」
と表示されるはずが「null」と表示されてしまいます。

エラーメッセージ

error
1null
2※エラーは出ませんが「null」と表示されます。

該当のソースコード

JavaScript
1console.log(document.querySelector('#colorPicker'));

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

ChatGPTに「console.log(document.querySelector('#colorPicker'));」と入力したら
「console.log(document.querySelector('#colorPicker')); の実行自体には文法的なエラーはありませんが、以下のような点に注意が必要です。 **: #colorPicker というIDを持つ要素がHTMLに存在しない場合、querySelectorは nullを返します。この場合、コンソールに nullと表示されます。」
と返ってきました。「colorPicker」はHTML（index.html）からコピペしたので、スペルミスは無いと思います。

補足

【HTML（index.html）のコード】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="description" content="ColorPicker"> <link rel="stylesheet" href="css/style.css"> <script src="js/script.js" befor></script> <title>カラーピッカー</title> </head> <body> <div> <p id="colorText">カラーコードを検索</p> <input id="colorPicker" type="color"> </div> </body> </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'));

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

回答2件

ただいま解決いたしました。

と書きたかったところが

となっていました。

皆様、ご回答ありがとうございました！

投稿2024/10/14 12:04

JavaScript

総合スコア4

解決方法は2つあります

1つめ

scriptタグをbodyの上に書けば動くと思います

diff
1<body>
2  <div>
3    <p id="colorText">カラーコードを検索</p> <input id="colorPicker" type="color">
4  </div>
5+  <script src="js/script.js"></script>
6</body>

2つめ

scriptを以下のように書けば動くと思います

diff
1+ document.addEventListener('DOMContentLoaded', () => {
2  console.log(document.querySelector('#colorPicker'));
3+ })
4

投稿2024/10/14 10:59

in53snpt

総合スコア9

JavaScript

2024/10/14 11:23

回答ありがとうございます。試してみましたが解決できませんでした。【一つ目のコンソール結果】 input#colorPicker 【二つ目のコンソール結果】 Uncaught SyntaxError: Unexpected token '}' (at script.js:4:5) となりました。この場合どの辺りに原因がありそうでしょうか？