How do i call a function after a button has been clicked on DOM

Question

I have a test button setup that works when it is clicked on, it is able to display an alert or confirm window. However i want it to display a list of items, i have the code for the list but i cant seem to bring it up when the button is clicked. I am using all DOM, so no jquery required. thank you

var creatbtndiv = document.createElement("div");
var creatbtn = document.createElement("button");
creatbtn.innerHTML = "Click Me";

creatbtndiv.appendChild(creatbtn);

document.body.appendChild(creatbtndiv);



var list = function (name) {
    var creatDiv = document.createElement("div");
    creatDiv.id = "submenudiv";
    creatDiv.className = "submenudiv";

    var creatul = document.createElement("ul");
    for(i = 0; i < 5; ++i){
    li = doument.createElement("li");
    li.innerHTML = "Submenu" + index;
    creatul.appendChild(li);
    }

    creatDiv.appendChild(creatul);

    document.body.appendChild(name);


};



creatbtndiv.onclick = function () {
    var alert = confirm("yes master");
    list();
};

Answer 1

for(i = 0; i < 5; i++){
li = document.createElement("li");
li.innerHTML = "Submenu" + i; <----------- Replace index with "i"
creatul.appendChild(li);
}

creatDiv.appendChild(creatul);

document.body.appendChild(creatDiv); <----------- Replace "name" with "createDiv"

Answer 2

There are a few syntax errors on your code. Like doument, and using the variable index, when it should be i. And in the end of the List method, on document.body.appendChild you should pass the creatDiv as argument.
Looks like some CopyPaste mistakes ahn...

http://jsfiddle.net/ayvNZ/

Here is the working code:

var creatbtndiv = document.createElement("div");
var creatbtn = document.createElement("button");
creatbtn.innerHTML = "Click Me";

creatbtndiv.appendChild(creatbtn);

document.body.appendChild(creatbtndiv);



var list = function () {
    var creatDiv = document.createElement("div");
    creatDiv.id = "submenudiv";
    creatDiv.className = "submenudiv";

    var creatul = document.createElement("ul");
    for(i = 0; i < 5; ++i){
        li = document.createElement("li");
        li.innerHTML = "Submenu" + i;
        creatul.appendChild(li);
    }

    creatDiv.appendChild(creatul);
    document.body.appendChild(creatDiv);
};



creatbtndiv.onclick = function () {
    var alert = confirm("yes master");
    list();
};

Answer 3

Here's a correct fiddle, your code has a few errors in it. http://jsfiddle.net/8LZKc/

li = doument.createElement("li"); <-- should be document

index is not defined, you wanted i

name is not an element, you wanted creatDiv there insead

Answer 4

document was spelled wrong in the list item loop. Index isn't used anywhere, switched to use the indexer of 'i'. Name parameter isn't used or provided a value but creatDiv is the target element your creating for your list.

var creatbtndiv = document.createElement("div");
var creatbtn = document.createElement("button");
creatbtn.innerHTML = "Click Me";

creatbtndiv.appendChild(creatbtn);

document.body.appendChild(creatbtndiv);

var list = function (name) {
    var creatDiv = document.createElement("div");
    creatDiv.id = "submenudiv";
    creatDiv.className = "submenudiv";

    var creatul = document.createElement("ul");
    for (i = 0; i < 5; ++i) {
        li = document.createElement("li");
        li.innerHTML = "Submenu" + i;
        creatul.appendChild(li);
    }

    creatDiv.appendChild(creatul);

    document.body.appendChild(creatDiv);
};



creatbtndiv.onclick = function () {
    var alert = confirm('yes master');
    list();
};