実行できない文字や背景の色のかえ方

前提・実現したいこと

学校の宿題で特定の位置からマウスを話したり近づけたりすると文字や背景の色が変わるというプログラミングを作っているのですが思い通りに実行されません。

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

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", "ＭＳ Ｐゴシック", "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件

ベストアンサー

elm.backgroundColor -> elm.style.backgroundColor ではないでしょうか?

追記

var elm = document.getElementById( "id" );

よく見るとここもおかしいですね。id="id"というコードは見当たりません。~~が。。。対象としたい要素はどれですか?~~

以下のように修正した場合はどうでしょうか?

html
1<div id="p1" onMouseOver="dispItem('over','p1')" onMouseOut="dispItem('out','p1')">大学案内</div>
2<div id="p2" onMouseOver="dispItem('over','p2')" onMouseOut="dispItem('out','p2')">学域・学部・大学院</div>
3<div id="p3" onMouseOver="dispItem('over','p3')" onMouseOut="dispItem('out','p3')">教育研究</div>

js
1function dispItem(mode, id){
2    var elm = document.getElementById(id);
3    if( mode == "over" ){
4        // 背景色の変更
5        elm.style.backgroundColor = "#CCC";
6        // 文字色の変更
7        elm.style.color = "#000";
8    }else{
9        // 背景色の変更
10    　　　elm.style.backgroundColor = "#000";
11        // 文字色の変更
12        elm.style.color = "#FFF";
13    }
14}