JavaScriptでaddEventListenerを使ってページ遷移させるにはどうすればいいか

###前提・実現したいこと
javascriptで診断テストのようなものを作りたいと思っています。質問に対して「はい」か「いいえ」を選んでいき、最後に診断結果が出るというようなものです。以下のコードでエラーが出てしまいます。おそらくaddEventListenerを使ってページ遷移させているからなのですが、このようなエラーが出ないようにするにはどうすれば良いでしょうか。よろしくお願いいたします。

###発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at main.js:4
    at main.js:7

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

index.html
1<!DOCTYPE>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>診断テスト</title>
6  <link rel="stylesheet" href="styles.css">
7</head>
8<body>
9  <div id="container">
10    <h1>診断テスト</h1>
11    <div id="start">スタート</div>
12  </div>
13  <script src="main.js"></script>
14</body>
15</html>

question1.html
1<!DOCTYPE>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title></title>
6  <link rel="stylesheet" href="styles.css">
7</head>
8<body>
9  <div id="container">
10    <div class="question">質問１：テキストテキストテキストテキストテキストテキストテキスト</div>
11    <div class="yes_no"><div id="yes1" class="yes">はい</div><div id="no1" class="no">いいえ</div></div>
12  </div>
13<script type='text/javascript' src="main.js"></script>
14</body>
15</html>

Javascript
1(function(){
2  'use strict';
3  var start = document.getElementById('start');
4  start.addEventListener('click', function(){
5    window.location.href = "question1.html";
6  })
7})();

###試したこと
DOMcontentLoadedを使ってもエラーが消えませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2017/06/23 16:49

提示のコードでエラーが出ません。

kozy

2017/06/24 03:52

あれ、おかしいですね????私のPCではエラーになってしまうんですが。ページ遷移させなければaddEventListenerを使ってもエラーにならないのでその辺りが原因かと思っているのですが。もう少し自分でも原因究明してみます。

kei344

2017/06/24 05:04 編集

ブラウザの種類とバージョンも提示してください。（追記：）Windows7 Firefox/Chrome/IE11で問題なく動きました。

kozy

2017/06/24 07:03

ブラウザはChromeの最新版です。

Lhankor_Mhy

2017/06/24 07:12

『ページ遷移させなければ』という言葉が気になりますね。ページ遷移後は、当然、遷移前のスクリプトが動作しませんが、そういう話ではないですよね？

kozy

2017/06/24 07:25 編集

すみません、説明不足で！実はindex.htmlのaddEventListenerは動作自体はするのですが、エラーは上記の箇所で出てしまうという状況です。そして遷移後のquestion1.htmではaddEventListenerが効かなくなるので、おそらくquestion1.htmlのJavaScriptが効いていないのかなという気がしています。question2.htmlもアップしておきます。

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

回答2件

ベストアンサー

question1.htmlにはdocument.getElementById('start')がないので、start.addEventListenerが実行できずにエラーになります。そして、そこで処理が中断するので、その後に書かれた他のイベントも処理されません。

解決法としては、

要素が取得できているか確認する
スクリプトを分ける
例外を拾う

等がいいでしょう。

try…catch 構文は試したい文のブロックをマークし、例外を投げる必要がある場合のレスポンスを指定するための構文です。

try...catch - JavaScript | MDN

投稿2017/06/24 07:30

Lhankor_Mhy

総合スコア36078

kozy

2017/06/24 07:52

ありがとうございます！挙げていただいた解決法でやってみたいと思います。ちなみになんですが、こういった診断テストのようなものを作る場合、htmlファイルを分けずに作る方が良いのでしょうか？まだあまり慣れておらず、作り方もよく分からない状態でして…。こういう風に作った方が良いといったアドバイスをいただければ幸いです。

Lhankor_Mhy

2017/06/24 08:26

私だったらページ遷移をさせないシングルページで作ると思います。修正変更をする時に、あっちこっち開くのしんどそうなので。最後の診断結果ページだけ別ページにするかもですね。

kozy

2017/06/24 13:08

なるほど。やはりシングルページで作るのがベターですね。ありがとうございます！

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

ロードタイミングな気もするので

JavaScript
1window.onload = function(){
2  'use strict';
3  var start = document.getElementById('start');
4  start.addEventListener('click', function(){
5    window.location.href = "question1.html";
6  })
7};