Closures in Practice

by Dan Wahlin

HTML

<div id="container">This is the container</div>
<br />
<a href="#" id="size-1">Border Size 1</a>
<a href="#" id="size-6">Border Size 6</a>

JavaScript

function borderChanger(id, size) {
  return function() {
    document.getElementById(id).style.border =       size + 'px solid black';
  };
}

var divId = 'container';
var size1 = borderChanger(divId, 1);
var size6 = borderChanger(divId, 6);

document.getElementById('size-1').onclick = size1;
document.getElementById('size-6').onclick = size6;