1. 首頁
  2. 問答
  3. 動態的onClick不工作

動態的onClick不工作

2011-02-25 77 views
1

我知道即時做的事情真的很愚蠢here.Im得到錯誤的document.getElementById（）爲空或不是一個對象。有人可以幫助我嗎？動態的onClick不工作

<body> 
<div id="box1" style="width:100px;height:100px;background:#ccc;"></div> 
<div id="box2" style="width:100px;height:100px;background:#ccc;"></div> 
<div id="box3" style="width:100px;height:100px;background:#ccc;"></div> 
<div id="box4" style="width:100px;height:100px;background:#ccc;"></div> 
<div id="box5" style="width:100px;height:100px;background:#ccc;"></div> 
<script> 

for (var i = 0; i < 5; i++) { 
document.getElementById('box' + i).onclick = function() {alert('You clicked on box #' + i);}; 
} 

</script> 
</body>

謝謝

來源

2011-02-25 manraj82

+3

我建議使用一個框架，如jQuery，所以事件綁定跨平臺工作。 – Jamie 2011-02-25 16:19:19

+0

同意你+1 – Jith 2011-02-25 16:34:52

回答

9

索引問題

i開始在0。沒有框稱爲box0。更改環路：

for (var i = 1; i <= 5; i++) { 
document.getElementById('box' + i).onclick = function() {alert('You clicked on box #' + i);}; 
}

範圍問題

正如評論家指出的那樣，還與代碼的範圍問題。更改爲：

for (var i = 1; i <= 5; i++) { 
    document.getElementById('box' + i).onclick = (function(index){ 
    return function() { 
     alert('You clicked on box #' + index); 
    }; 
    })(i); 
}

來源

2011-02-25 16:09:46

+6

我認爲應該是'<='。 – zdyn 2011-02-25 16:10:34

+0

+1我也不打算把在一個答案......正要發表評論... – Endophage 2011-02-25 16:10:55

+0

@ZDYN感謝，更新 – 2011-02-25 16:11:02

2

我相信已經有解決方案;無論如何，我只是想說，你有jQuery的替代太...

 

$(document).ready(function() { 
    $("div[id*=box]").click(function() { 
     alert('You clicked on box ' + $(this).attr('id')); 
    }); 
});

來源

2011-02-25 16:33:14 Jith

相關問題

 相關問題