addEventListenerのエラーについて

前提・実現したいこと

HTMLとJavascriptで、webページを作っています。
現在、実装しようとしている機能は、スライダーを移動した際に、
スライダーの位置に応じた数値が画面に反映される仕組みです。

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

Google Chromeで動作確認を行っているのですが、スライダーを動かしても、数値が反映されません。
Chromeの検証ツールで確認したところ、下記エラーが表示されましたが、対処方法が分かりません。
Uncaught TypeError: Cannot read property 'addEventListener' of null

該当のソースコード

JavaScript
1
2<body>
3  <div class="container">
4  <p><input type ="text"></p>
5  <p><div id ="btn">Generator Password</div></p>
6  <fieldset>
7    <legend>Options</legend>
8    <p>Length (<span id="label">8</span>):<input type="range"　id="slider" value="8" min="4" max="20"></p>
9    <p>Numbers?: <input type="checkbox">
10      symbols?: <input type="checkbox">
11    </p>
12  </fieldset>
13<!--container-->
14
15<script>
16(function(){
17  'use strict';
18
19var slider = document.getElementById('slider');
20var label = document.getElementById('label');
21
22slider.addEventListener('change',function(){
23  label.innerHTML = this.value;
24});
25
26})();
27</script>
28<!--即時関数-->
29
30</body>

試したこと

スペルチェックは何度もしたのですが解決しませんでした…

補足情報（FW/ツールのバージョンなど）

Google Chrome最新バージョン：67.0.3396.99（Official Build）（64 ビット）

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

回答1件

ベストアンサー

<input type="range"　id="slider"

idの前が全角スペースです

投稿2018/07/26 17:49

efcode

総合スコア422

InamuraYuta

2018/07/26 17:55

efcodeさんご指摘頂いた箇所を修正したら無事に動作いたしました！二時間ほど四苦八苦していたので、大変助かりました。ありがとうございます！

enokiyo

2019/12/28 11:30

まじか、ゴミ情報は消すべし

think49

2019/12/28 12:39

@InamuraYuta さん id属性値には空白文字を指定できない仕様だったはずです。 https://momdo.github.io/html/dom.html#the-id-attribute 他にも文法エラーがあるようなので、バリデータを通すことをお勧めします。 https://validator.w3.org/

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