在DOM上单击按钮后如何调用函数

Question

我有一个测试按钮设置，当它被单击时可以使用，它可以显示警报或确认窗口。 但是我希望它显示项目列表，我具有列表的代码，但是单击按钮时似乎无法显示它。 我正在使用所有DOM，因此不需要jquery。 谢谢

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

您的代码上有一些语法错误。 像doument一样，并使用变量index ，当它应该是i 。 在List方法的最后，在document.body.appendChild您应该将creatDiv作为参数传递。
看起来有些CopyPaste错误。

http://jsfiddle.net/ayvNZ/

这是工作代码：

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 2

这是一个正确的小提琴，您的代码中有一些错误。 http://jsfiddle.net/8LZKc/

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

index未定义，您想要i

name不是元素，您想creatDiv那儿创建creatDiv

Answer 3

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 4

清单项目循环中的文件拼写错误。 索引未在任何地方使用，切换为使用索引器“ i”。 名称参数未使用或未提供值，但creatDiv是您为列表创建的目标元素。

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();
};