Want more features on Pastebin? Sign Up, it's FREE!
Guest

Closure

By: a guest on May 4th, 2013  |  syntax: HTML  |  size: 1.65 KB  |  views: 36  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <html>
  2.     <head>
  3.         <title>Test</title>
  4.         <script type="text/javascript">
  5.         function test() {
  6.             var ol = document.getElementById('test');
  7.             var lis = ol.getElementsByTagName('li');
  8.             for (var i = 0; i < lis.length; i++) {
  9.                lis[i].onmouseover = function() { lis[i].innerHTML = i.toString(); };
  10.            }
  11.        }
  12.        
  13.        function test2() {
  14.            var ol = document.getElementById('test2');
  15.            var lis = ol.getElementsByTagName('li');
  16.            for (var i = 0; i < lis.length; i++) {
  17.                lis[i].onmouseover = closure(lis[i], i.toString());
  18.            }
  19.        }
  20.        
  21.        function closure(elem, html) {
  22.            return function() { elem.innerHTML = html; };
  23.        }
  24.        
  25.        function test3() {
  26.            var ol = document.getElementById('test3');
  27.            var lis = ol.getElementsByTagName('li');
  28.            for (var i = 0; i < lis.length; i++) {
  29.                (function () {
  30.                var j = i;
  31.                var elem = lis[i];
  32.                elem.onmouseover = function () { elem.innerHTML = j.toString(); };
  33.                })();
  34.            }
  35.        }
  36.        </script>
  37.     </head>
  38.     <body onload="test(); test2(); test3();">
  39.         <h1>Test</h1>
  40.         <ol id="test">
  41.             <li>A</li>
  42.             <li>B</li>
  43.             <li>C</li>
  44.         </ol>
  45.         <ol id="test2">
  46.             <li>A</li>
  47.             <li>B</li>
  48.             <li>C</li>
  49.         </ol>
  50.         <ol id="test3">
  51.             <li>A</li>
  52.             <li>B</li>
  53.             <li>C</li>
  54.         </ol>
  55.     </body>
  56. </html
clone this paste RAW Paste Data