oddurs/jsbin.ticeg.css

## jsbin.ticeg.css
#box {
  width: 50px;
  height: 50px;
  background: blue;
  top: 150px;
  left: 10px;
}

.normal {
  background-color: white;
  color: black;
}

.changed {
  background-color: black;
  color: white;
}

## jsbin.ticeg.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Event handlers lesson" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body class="normal">
  <h1>Hello, events</h1>
  <p>la di da</p>
  <button>Normal</button><button>Changed</button>
</body>
</html>

## jsbin.ticeg.js
(function() {
  var button = document.getElementsByTagName("button");
  for (var i = 0, len = button.length; i < len; i++) {
    button[i].onclick = function() {
      var className = this.innerHTML.toLowerCase();
      document.body.className = className;
    };
  }
}());
	#box {
	width: 50px;
	height: 50px;
	background: blue;
	top: 150px;
	left: 10px;
	}

	.normal {
	background-color: white;
	color: black;
	}

	.changed {
	background-color: black;
	color: white;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Event handlers lesson" />
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body class="normal">
	<h1>Hello, events</h1>
	<p>la di da</p>
	<button>Normal</button><button>Changed</button>
	</body>
	</html>
	(function() {
	var button = document.getElementsByTagName("button");
	for (var i = 0, len = button.length; i < len; i++) {
	button[i].onclick = function() {
	var className = this.innerHTML.toLowerCase();
	document.body.className = className;
	};
	}
	}());