stujo/clicker.html

## clicker.html
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<style>
  body
  {
    margin: 0 40px;
  }

  h4 { margin-top: 5px }

  #display{
    font-size: 4em;
  }

  .wall
  {
    text-align: center;
    border: 2px solid #333;
    padding: 20px;
    margin: 20px;
  }

  .buttons
  {
    text-align: center;
    font-size: 2em;
  }

  .buttons button
  {
    border-radius: 5px;
  }

</style>

</head>
<body>
<h4>Simple Event Demo</h4>
<hr/>

<div>
<div class="wall"><span id="display">0</span></div>
<div class="buttons">
<button id="display_add">Add</button>
</div>
</div>

<script type="text/javascript">
"use strict";

function displayer(span_id)
{

  function getDisplay()
  {
    return document.getElementById(span_id);
  }

  function getAddButton()
  {
    return document.getElementById(span_id + "_add");
  }


  function addFive()
  {
    var display = getDisplay();
    var score =  parseInt(display.innerHTML);

    if(isNaN(score))
    {
      score = 0;
    }

    display.innerHTML= score + 5;
  }


  function assignButtonCallbacks()
  {
    getAddButton().addEventListener('click', addFive);
  }

  assignButtonCallbacks();
}

window.addEventListener("load", function() {
  displayer("display");
});

</script>
</body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
	<style>
	body
	{
	margin: 0 40px;
	}

	h4 { margin-top: 5px }

	#display{
	font-size: 4em;
	}

	.wall
	{
	text-align: center;
	border: 2px solid #333;
	padding: 20px;
	margin: 20px;
	}

	.buttons
	{
	text-align: center;
	font-size: 2em;
	}

	.buttons button
	{
	border-radius: 5px;
	}

	</style>

	</head>
	<body>
	<h4>Simple Event Demo</h4>
	<hr/>

	<div>
	<div class="wall"><span id="display">0</span></div>
	<div class="buttons">
	<button id="display_add">Add</button>
	</div>
	</div>

	<script type="text/javascript">
	"use strict";

	function displayer(span_id)
	{

	function getDisplay()
	{
	return document.getElementById(span_id);
	}

	function getAddButton()
	{
	return document.getElementById(span_id + "_add");
	}


	function addFive()
	{
	var display = getDisplay();
	var score = parseInt(display.innerHTML);

	if(isNaN(score))
	{
	score = 0;
	}

	display.innerHTML= score + 5;
	}


	function assignButtonCallbacks()
	{
	getAddButton().addEventListener('click', addFive);
	}

	assignButtonCallbacks();
	}

	window.addEventListener("load", function() {
	displayer("display");
	});

	</script>
	</body>
	</html>