Q&A
今のコードだと「移動した先からの更に移動」にならないですけど、それでも良いのでしょうか。
発生するエラー
マウスを動かすと、マウスに沿ってキャラクターが付いてくるというプログラムを書いていました。
すると、マウスを動かす度に以下のエラーが発生します。
main.js:9 Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument.<anonymous> (main.js:9)
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="style.css"> 8</head> 9<body> 10 <img src="img/83949354_220x220.jpeg" class="char"> 11 12 13 14 <script src="main.js"></script> 15</body> 16</html>
javascript
1window.addEventListener('load', function() { 2 3 4 const char = document.querySelector('char'); 5 6 document.addEventListener('mousemove', (event) => { 7 char.style.left = `${event.clientX - 100}px`; 8 char.style.top = `${event.clientY - 100}px`; 9 }); 10})
おそらく、loadイベントの処理に問題があると思うのですが、お分かりになる方いましたらご教授いただければ幸いです。
回答3件
0
よくわからないですが、こういうことですか？
javascript
1document.querySelector('char'); 2↓↓↓ 3document.querySelector('.char');
投稿2021/01/13 01:35
総合スコア116694
0
javascript
1 const char = document.querySelector('char');
'char' という名前の要素はありませんので、おそらく '.char' が求めるセレクタです。
投稿2021/01/13 01:34
総合スコア21679
0
ベストアンサー
おそらくcharがnullになっていると思います。
クラス名で指定したい場合は、セレクタに.をつけましょう。
diff
1- const char = document.querySelector('char'); 2+ const char = document.querySelector('.char');
投稿2021/01/13 01:33
総合スコア2411
ご回答ありがとうございます。
完全に見落としていました。
このエラーで30分ほど悩んでいたので、コードを書くときはもっと注意していこうと思います。
ありがとうございました。
あなたの回答
tips
プレビュー
