Javascript Closures Demo Working

by Prasad

HTML

Closures Demo
<br>
Practival Closures
<a href="#" id="size-18">18</a>
<a href="#" id="size-16">16</a>
<a href="#" id="size-14">14</a>
<input type="text" id="inputFontSize" placeholder="Enter Font Size" onKeyUp="setFontSizeInput(this.value);">

CSS

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

JavaScript

function initB(bname) {
	var nameB= bname;
	function displayNameB() {
		console.log("UserName In InitB: "+nameB);
	}
	displayNameB();
}
var InitB=initB('New Guest');
var reInitB=initB('Guest User New');
function init() {
	var name= "Guest";
	function displayName() {
		console.log("UserName: "+name);
	}
	return displayName; 
	
}
var Init = init();
Init();

function adder(x) {
	return function(y) {
		return x+y;
	};
}
var add5  = adder(5);
var add10 =  adder(10);

console.log("add5(4): "+add5(4)); 
console.log("add10(4): "+add10(4));

function setFontSize(size) {		
	return function() {
		console.log("font size: "+size+ " setFontSize()");		
		document.body.style.fontSize = size + 'px';
	};
}
function setFontSizeInput(ipval) {	
	var fontsizeIP= setFontSize(ipval);
	fontsizeIP(ipval);
}

	var fontsize18 = setFontSize(18);
var fontsize14 = setFontSize(14);
var fontsize16 = setFontSize(16);
document.getElementById('size-18').onclick = fontsize18;
document.getElementById('size-14').onclick = fontsize14;
document.getElementById('size-16').onclick = fontsize16;