前提・実現したいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/26 17:55
2019/12/28 11:30
2019/12/28 12:39