Cannot read property 'style' of null と表示され解決できません

###前提・実現したいこと
javascriptでクリックした場所にボールが移動してくる。というのを試しました

###発生している問題・エラーメッセージ
Cannot read property 'style' of null

と表示され困ってます。

###該当のソースコード


//  ↓ html
 
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title></title>
	<link rel="stylesheet" type="text/css" href="ジャバスクリプト練習.css">
	<script type="text/javascript" src="ジャバスクリプト練習.js" ></script>
</head>
<body>

<h1>こんにちは</h1>

<p>クリックしてね</p>
<div id="foo"></div>

</body>
</html>


// ↓ javascript
 
var f = document.getElementById('foo');
 document.addEventListener('click', function(ev){
    f.style.left = (ev.clientX-25)+'px';   //← エラー表示箇所 
    f.style.top = (ev.clientY-25)+'px';
},false);


// ↓ css 
p{
	padding-left: 60px;
}

#foo{
	border-radius: 50px;
	width: 50px;
	height: 50px;
	background: #343838;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 1s;
}

###試したこと
最初はコンテンツツリーが読み込まれて無いのかな？と素人ながら考え、
DOMContentLoaded も試してみたのですが、同じようにstyle null が表示され
サンプルコード http://jsfiddle.net/RwtHn/5/ をコピペしてみましたが
結局同じでした。

###補足情報(言語/FW/ツール等のバージョンなど)
ブラウザ Google Chrome バージョン 52.0.2743.116 m (64-bit)
テキストエディタ notepad++
です。

kei344

2016/09/14 17:04

コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

.mira

2016/09/14 22:46

修正いたしました。ご迷惑をおかけしました。

kei344

2016/09/15 02:09

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

.mira

2016/09/15 03:02

度々申し訳ないです。変更させていただきました。

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

回答1件

ベストアンサー

var f = document.getElementById('foo');

この処理が実行されるとき、まだdiv#fooは読み込まれていませんので、要素を参照することができません。

コンテンツツリーが読み込まれて無いのかな？

まさにこれです。スクリプトを変えずに対応する場合は、

HTML
1<p>クリックしてね</p>
2<div id="foo"></div>
3
4<script>
5var f = document.getElementById('foo');
6document.addEventListener('click', function(ev){
7  f.style.left = (ev.clientX-25)+'px';   //← エラー表示箇所
8  f.style.top = (ev.clientY-25)+'px';
9},false);
10</script>

このように対象の要素より後にscript要素を移動してください。また、

DOMContentLoaded も試してみた

これも対処の1つで、実際どのように記述されたかはわかりませんが、

HTML
1<script>
2document.addEventListener("DOMContentLoaded", function() {
3  var f = document.getElementById('foo');
4  document.addEventListener('click', function(ev){
5    f.style.left = (ev.clientX-25)+'px';   //← エラー表示箇所
6    f.style.top = (ev.clientY-25)+'px';
7  },false);
8}, false);
9</script>

このように全体を囲う形にしたでしょうか？これであればscript要素は元の位置で問題無いかと思います。

なお、参考にされたjsfiddleは、元々JavaScriptの動作をonloadに設定してある（JavaScriptペインの右上の歯車のマークから実行タイミングを設定できます）ため、自らwindow.onload～などなどをせずとも、問題なく動作するようになっています。

投稿2016/09/14 18:04

sii_side

総合スコア849

.mira

2016/09/14 22:38

sii_side様　有難うございました。まさに仰る通りで、var f = document.getElementById('foo');　の記述場所を変更したら問題なく作動しました。また、DOMContentLoaded　の時も記述場所を間違えてたみたいです。 jsfiddle　の仕様まで教えていただき誠に有難うございます。本当に感謝します。

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