JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<div id="container">
    <input type="button" value="button-1" />
    <input type="button" value="button-2" />
    <input type="button" value="button-3" />
</div>

Output: <span id="output"></span>

CSS

body {
    font-family: sans-serif;
    font-size: 12px;
    margin: 20px;
}

#container {
    margin-bottom: 10px;
}

JavaScript

function ContainerClass(id) {
    function onElementClicked() {
        if (this.onDelegateMethod) {
            this.onDelegateMethod();
        }
    }
    var i,
        children = document.getElementById(id).children;
    for (i = 0; i < children.length; i++) {
        children[i].onclick = onElementClicked;
    }
    return {
        setDelegateMethod : function(index, someFunction) {
            children[index].onDelegateMethod = someFunction;
        }
    }
}

(function() {
    var container = new ContainerClass("container"),
        values = ["A", "B", "C"];
    values.forEach(function(element, index) {
        container.setDelegateMethod(index, function() {
            document.getElementById("output").innerHTML = element;
        });
    })
})();

(function() {
    var i = 0, 
        messages = ["A", "B", "C", "D", "E"];
    for (i = 0; i < messages.length; i++) {
        (function(i) {
            var str = messages[i];
            setTimeout(function() {
                console.log(str);
            }, i * 250);
        })(i);
    }
})();