Closure Example

Example of closure used in JS tutorial.

HTML

<p>Some paragraph text</p>
    <h1>some heading 1 text</h1>
    <h2>some heading 2 text</h2>
    <h3>Dip Time!</h3>

    <a href="#" id="size-12">12</a>
    <a href="#" id="size-14">14</a>
    <a href="#" id="size-16">16</a>
    <a href="#" id="size-20">20</a>
    <a href="#" id="size-30">30</a>

CSS

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 50px;
}

h1 {
  font-size: 1.5em;
}
h2 {
  font-size: 1.2em;
}
h3 {
  font-size: 1.5em;
}

JavaScript

function makeSizer(size) {

    alert('Hello');
  };

    
document.getElementById('size-12').onclick = function() {makeSizer()};
document.getElementById('size-14').onclick = makeSizer(14);
document.getElementById('size-16').onclick = function() {makeSizer(16)};
document.getElementById('size-20').onclick = function() {makeSizer(20)};
document.getElementById('size-30').onclick = function() {makeSizer(30)};