Counters example


The goal is to create a web page which contains several independent counters. Each time a counter is clicked, it is incremented. Here’s you can try out a working example of what’s wanted.

Below is the complete code of this example. To simplify the matter, it is completely self-contained. It uses no library code, other than the definition of SimpleClass.

In general library code is a good idea. This example is designed to teach you the basics of JavaScript, and not the use of a library. We hope that what you learn here will help you choose a library, and build libraries of your own.


<script src="library.js"></script>
<script src="counters.js"></script>
<link rel="stylesheet" type="text/css" href="counters.css" />
<title>JS for Python: example: counters</title>

<p>Click on a counter to increment its value.</p>

<div id="example">
<p>This will disappear if JavaScript is working properly.</p>

<p>Return to documentation of <a href="../counters-example.html">Counters example</a>.</p>


body {
    background: #DDD;
    font-family: sans-serif;

#example {
    padding: 20px;

#example span {
    padding: 10px;
    margin: 10px;
    border: 10px solid blue;
    background: #DDF;
    foreground: blue;
    font-weight: bold;


    // Define a Counter class.
    var counter = {};           // Prototype object for Counter.

    counter.__init__ = function(name){ = name;
        this.count = 0;

    counter.onclick = function(event){

        this.count ++;

    counter.html = function(){

        return + ' ' + this.count;

    Counter = SimpleClass(counter);

    // Make explicit use of global variables.
    var global = (function(){return this;})();

    // Interaction.
    var onclick_factory = function(models){

        var onclick = function(event){

	    event = event || global.event; // For IE event handling.
	    var target = || event.srcElement;
            var id =;
            if (id) {
                var id_num = +id.slice(1);
                var model = models[id_num];
                var html = model.html();
                if (html){
                    global.document.getElementById(id).innerHTML = html;
        return onclick;

    // Set up the web page.
    global.onload = function(){

        var models = [

        var element = document.getElementById('example');

        element.innerHTML = (
            '<span id="a0">apple 0</span>'
            + '<span id="a1">banana 0</span>'
            + '<span id="a2">cherry 0</span>'
            + '<span id="a3">date 0</span>'

        element.onclick = onclick_factory(models);
        element = undefined;    // Avoid IE memory leak.