0

次のような Html ファイルがあります。

<!doctype html>


<head>
<title></title>

<link rel="stylesheet" type="text/css" href="style/boxClass.css" />
<script type="text/javascript">

/* lightBox class */

function box (id1,id2) {
    this.boxBackgroundDiv = document.getElementById (id1);
    this.boxWorkAreaDiv   = document.getElementById (id2);
}

lightBox.prototype.setBackgroundColor = function(c) {
    this.boxBackgroundDiv.style.backgroundColor = c;
    alert('Hello back');
};



function init (id1,id2)
{
   boxObj = new box (id1,id2);
   alert ("Hello");
}

</script>
</head>
<body onload="init('box1','box2')">
<div id="lightbox1" class="boxBackground">I am here</div>
<div id="lightbox2" class="boxWorkArea"><button onclick="boxObj.setBackgroundColor('Red')">I am here</button></div>

</body>
</html>

ここで、このコードのように init 関数を呼び出すと、正常に動作します。しかし、window.onload 経由で以下のようにすると、うまくいきません。この場合、div ID を取得できません。しかし、クラスの obj を作成するには div id が必要です。

<!doctype html>


<head>
<title></title>

<link rel="stylesheet" type="text/css" href="style/boxClass.css" />
<script type="text/javascript">

/* lightBox class */

function box (id1,id2) {
    this.boxBackgroundDiv = document.getElementById (id1);
    this.boxWorkAreaDiv   = document.getElementById (id2);
}

lightBox.prototype.setBackgroundColor = function(c) {
    this.boxBackgroundDiv.style.backgroundColor = c;
    alert('Hello back');
};



function init (id1,id2)
{
   boxObj = new box (id1,id2);
   alert ("Hello");
}
window.onload = init ("box1",box2);
</script>
</head>
<body>
<div id="lightbox1" class="boxBackground">I am here</div>
<div id="lightbox2" class="boxWorkArea"><button onclick="boxObj.setBackgroundColor('Red')">I am here</button></div>

</body>
</html>
4

1 に答える 1

1

2 つの問題:

1) box2 パラメータの周りに引用符がありません。

2) init 関数 (ここでは void) の戻り値を window.onload ハンドラに割り当てています。

以下のように onload ハンドラを割り当てる必要があります。

window.onload = function(){
 init ("box1","box2");
}
于 2012-07-03T18:05:20.583 に答える