Q&A
初心者ですjavascriptを勉強しております、ウェブページ作成時にdreamweaverを使用しています。
まずは動作確認のため
URL https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
「例の部分のシンプルなリスナーの追加」をコピペし試しているのですがaddEventListenerがなぜ反応せずエラーを返します。
エラー内容
Uncaught TypeError: Cannot read property 'addEventListener' of null
動作確認方法
・dreamweaverを使ってchromeブラウザーで確認。
・thmlファイルを直接chromeで開いて確認。
ソース
lang
1<body> 2 <h1>スタイルの変更方法</h1> 3 <div id="foo" class="foo-before">classの変更</div> 4 <div id="bar" class="bar">styleの変更</div> 5 <div id="baz" class="baz">stylesheetの変更</div> 6 7<div class="line"> 8<p>fontsize up</p> 9</div> 10<div class="line2"> 11<p>font-color change to red</p> 12 </div> 13 14<table id="outside"> 15 <tr><td id="t1">one</td></tr> 16 <tr><td id="t2">two</td></tr> 17 18 19 </table> 20 21</body> 22
外部ソースとして読込
lang
1function modifyText(){ 2 var t2 = document.getElementById("t2"); 3 if (t2.firstChild.nodeValue=="three"){ 4 t2.firstChild.nodeValue="two"; 5 }else{ 6 t2.firstChild.nodeValue="three"; 7 } 8} 9var el = document.getElementById("outside"); 10el.addEventListener("click",modifyText,false);
cssは割愛します。
不足な部分や不備がありましたら修正いたします。
よろしくお願いします。
回答1件
0
ベストアンサー
動くサンプル：https://jsfiddle.net/artdnzm0/
提示のコードがそのまま動くので、「外部ソースとして読込」をhead要素の中でしていませんか？
body要素の閉じタグ直前に書くか、DOMContentLoaded を待ってみてください。
js
1document.addEventListener( 'DOMContentLoaded' , function( e ) { 2 // ここにコード 3}, false );
【DOMContentLoaded - Web 技術のリファレンス | MDN】
https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded
【DOMContentLoadedイベントについて - 事務屋さんの備忘録】
http://freefly3104.hatenablog.com/entry/2015/03/02/200750
投稿2018/09/07 19:21
総合スコア69400
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/09/07 21:02