extras/letWithClosures.html

<!doctype html>
<html>
<head>
<title>Let, scope, and closures</title>
<meta charset="utf-8">
<style>
div {
	padding: 5px;
	margin: 5px;
	border: 1px solid black;
	background-color: lightgray;
	width: 100px;
	cursor: pointer;
}
</style>
<script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js" 
	type="text/javascript"></script>
<script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"
	type="text/javascript"></script>
<script>
traceur.options.experimental = true;
</script>
<script type="module">
window.onload = function() {
	var button = document.getElementById("button");
	button.onclick = function() {
		var body = document.querySelector("body");
		for (let i = 0; i < 3; i++) {
			var div = document.createElement("div");
			div.id = "div" + i;
			div.innerHTML = "This is div " + i;
			div.onclick = function() {
				console.log("You just clicked div " + i);
			};
			body.appendChild(div);
		}
	};
};
</script>
</head>
<body>
<h1>let, scope, and closures</h1>
<button id="button">click me</button>
</body>
</html>