Question

I am trying to get this code to work in a way that where I click on item one it will do one function, and when I click on item two it will do a different function. Right now they all go to the same thing and I can’t seem to pull it apart.

 var list = [];

list[0] = ["zero"];
list[1] = ["one"];
list[2] = ["two"];
list[3] = ["three"];

function Make(){
for ( var i = 0; i < 4 ; i++ ) {
    var div = document.createElement("div");
    div.style.width = "10px";
    div.style.height = "10px";
    div.style.background = "white";
    div.style.color = "black";
    div.style.top = "0px";
    div.style.left = "0px";
    div.style.margin = "10px 10px auto";
    div.style.cursor = "pointer";
    div.innerHTML = list[i];
    !function(){
        var index = 0;
        div.onclick = function () { alert("this works"); };
    }();
    document.body.appendChild(div);
}
 }

Answer 1

Did you mean something like this?

    <script type="text/javascript">
        var list = [];

        list[0] = ["zero"];
        list[1] = ["one"];
        list[2] = ["two"];
        list[3] = ["three"];

        function Make(){
            for ( var i = 0; i < 4 ; i++ ) {
                var div = document.createElement("div");
                div.style.width = "10px";
                div.style.height = "10px";
                div.style.background = "white";
                div.style.color = "black";
                div.style.top = "0px";
                div.style.left = "0px";
                div.style.margin = "10px 10px auto";
                div.style.cursor = "pointer";
                div.innerHTML = list[i];
                !function(){
                    var index = 0;
                    div.onclick = function () { doSomething(this); };
                }();
                document.body.appendChild(div);
            }
        }

        function doSomething(element){
            var value = element.innerHTML;
            alert('clicked : '+ value);
            switch(value){
                case "zero":
                //Your code here
                break;
                case "one":
                //Your code here
                break;
            }
        }
        Make();
    </script>