前提・実現したいこと
学校の宿題で特定の位置からマウスを話したり近づけたりすると文字や背景の色が変わるというプログラミングを作っているのですが思い通りに実行されません。
発生している問題・エラーメッセージ
25行目と30行目でUncaught TypeError: Cannot set property 'backgroundColor' of null
というエラーメッセージが表示されます。
該当のソースコード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>JavaScript入門4</title> <style type="text/css"> body{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "sans-serif"; } div{ width: 150px; float: left; margin: 2px; padding: 10px; font-size: 12px; background-color: #000; color: #FFF; } </style> <script type="text/javascript"> function dispItem(mode, id){ var elm = document.getElementById( "id" ); if( mode == "over" ){ // 背景色の変更 elm.backgroundColor = "#CCC"; // 文字色の変更 elm.style.color = "#000"; }else{ // 背景色の変更 elm.backgroundColor = "#000"; // 文字色の変更 elm.style.color = "#FFF"; } } </script> </head> <body> <h1>Web大学</h1> <!-- イベントハンドラはポインタが「乗った時」「外れた時」の順で書くこと--> <div id="p1"onMouseOver="dispItem('over','id')"onMouseOut="dispItem('out','id')">大学案内</div> <div id="p2"onMouseOver="dispItem('over','id')"onMouseOut="dispItem('out','id')">学域・学部・大学院</div> <div id="p3"onMouseOver="dispItem('over','p3')"onMouseOut="dispItem('out','p3')">教育研究</div> </body> </html>
試したこと
ダブルクォートなどの細かい部分を変えてみましたがうまくいきませんでいた。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/13 07:24
2018/05/13 07:28
2018/05/13 07:29
2018/05/13 07:31
2018/05/13 07:38