<html>
<head>
<title>Test</title>
<script type="text/javascript">
function test() {
var ol = document.getElementById('test');
var lis = ol.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() { lis[i].innerHTML = i.toString(); };
}
}
function test2() {
var ol = document.getElementById('test2');
var lis = ol.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = closure(lis[i], i.toString());
}
}
function closure(elem, html) {
return function() { elem.innerHTML = html; };
}
function test3() {
var ol = document.getElementById('test3');
var lis = ol.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
(function () {
var j = i;
var elem = lis[i];
elem.onmouseover = function () { elem.innerHTML = j.toString(); };
})();
}
}
</script>
</head>
<body onload="test(); test2(); test3();">
<h1>Test</h1>
<ol id="test">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<ol id="test2">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<ol id="test3">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
</body>
</html