Javascript 通过创建的HTML代码调用函数

编辑：

在重新使用另一个方法（createElement）之后，我的代码已经达到了可以正确调用元素的程度，但是它只使用在函数末尾制作的最后一个横幅的参数。这是我到目前为止的一段经历

function load() {
 var staffB = ["Admin", "GM", "Dev", "FM", "Lore", "App", "Magic", "Event"];
 var table = document.createElement("table");
 for (var staffI = 0; staffI < staffB.length; staffI = staffI + 2) {
     var row = document.createElement("tr");
     var td = document.createElement("td");
     var td2 = document.createElement("td");
     var temp1 = staffB[staffI];
     var temp2 = staffB[staffI + 1];
     for (var i = 0; i < 10; i++) {
         td.innerHTML = '<img src=banners/' + staffB[staffI] + '.png height="auto" width="100%">';
         td.onclick = function() { select (temp1) }
         td2.innerHTML = '<img src=banners/' + staffB[staffI + 1] + '.png height="auto" width="100%">';
         td2.onclick = function() { select (temp2) }
     }
     row.appendChild(td);
     row.appendChild(td2);
     table.appendChild(row);
 }
 document.getElementById("staff").appendChild(table);
 }

函数加载（）{
var staffB=[“管理员”、“总经理”、“开发人员”、“FM”、“知识”、“应用程序”、“魔法”、“事件”]；
var table=document.createElement（“表”）；
对于（var staffI=0；staffI

---

第一次在这里发帖，我为自己是一个彻头彻尾的傻瓜提前道歉

因此，首先，我正在为我所属的社区制作一个页面，以收集中世纪风格的横幅，因此为了便于我自己在将来添加/删除不同的横幅，我使用“for”制作了一个模块化的HTML系统。当它被创建时，它会更改它访问的文件的名称到数组中的名称，这样我只需要更改列表并添加一个文件。它创建的HTML是一个表，这样我就可以插入带有两列的图像

然后，该表用于选择菜单，以确定要选择的横幅/窗帘杆。我在每个

上都附加了一个ID，该ID基于其中的横幅（在创建HTML时完成）。现在我需要它，这样当他们被点击进行选择时，显示的示例图像会发生变化。在创建的HTML中，我创建了一个onclick=“select（Insert Banner Name Here）”，以便将Banner信息传输到下一个函数，这是一个开关

我后来发现，从我所看到的，函数传递的是一个变量，而不是单词/数据本身。我正试图想出一种方法来编写代码，这样在调用函数时，函数就知道单击了什么横幅。当我测试代码时，它总是返回[object HTMLTableCellElement]

如果我说不通，这个图片可能会有帮助。（为明亮的颜色道歉，它们在那里，我可以更容易地看到不同的div）

正在选择的横幅位于右侧，预览位于左侧。右侧的图像位于div（滚动条所在位置）中的表中。这就是我试图调用switch函数的地方

---

如果有人知道这是一种可行的方法，或者是一种更好的方法，我希望能得到一些帮助。

您可能需要查看

document.createElement

函数

有了这个，你可以做如下事情：

var staffB = ["http://i.stack.imgur.com/ziZF1.png", "http://i.stack.imgur.com/ziZF1.png", "http://i.stack.imgur.com/ziZF1.png"];
var table = document.createElement("table");
for (var staffI = 0; staffI < staffB.length; staffI = staffI + 2) {
    var row = document.createElement("tr");
    var td = document.createElement("td");
    for (var i = 0; i < 10; i++) {
        td.innerHTML = '<img src=' + staffB[staffI] + '.png height="auto" width="100%">';
    }
    td.onclick = function () {
        //Whatever function you like
        alert(1);
    }
    row.appendChild(td);
    table.appendChild(row);
}
document.body.appendChild(table);

var staffB=[”http://i.stack.imgur.com/ziZF1.png", "http://i.stack.imgur.com/ziZF1.png", "http://i.stack.imgur.com/ziZF1.png"];
var table=document.createElement（“表”）；
对于（var staffI=0；staffI

通过这种方式，可以对元素使用对象方法，从而更好地控制事件侦听器

编辑1:

使用匿名函数维护当前循环状态的示例：

var staffB = ["http://www.faster-minis.com/site/speed-mini.jpg", "http://i.stack.imgur.com/ziZF1.png"];
var table = document.createElement("table");
for (var staffI = 0; staffI < staffB.length; staffI++) {
    var row = document.createElement("tr");
    for (var i = 0; i < 10; i++) {
        var td = document.createElement("td");
        td.innerHTML = '<img src=' + staffB[staffI] + ' height="auto" width="100%">';
        //Anonymous scope to retain loop state
        (function(a){
            td.onclick = function () {
                //Whatever function you like
                //In here, "a" is the current "i"
                alert(a);
                alert(i);
            }
        })(i);
        row.appendChild(td);
    }
    table.appendChild(row);
}
document.body.appendChild(table);

var staffB=[”http://www.faster-minis.com/site/speed-mini.jpg", "http://i.stack.imgur.com/ziZF1.png"];
var table=document.createElement（“表”）；
对于（var-staffI=0；staffI

因此，我最终做的是用div重新处理它。这样我就可以为每个块设置ID，并从中向“filter”函数发送onclick。然后，filter函数使用elements.id提取哪个是哪个，然后将该信息发送给我的switch函数。以下是相关人员的代码

var staffB = ["Admin", "GM", "Dev", "FM", "Lore", "App", "Magic", "Event"];
for (var staffI = 0; staffI < staffB.length; staffI = staffI + 2) {
    var co1 = document.createElement("div");
    var co2 = document.createElement("div");
    var wide = (282 / 2 - 10);

    co1.setAttribute("id", staffB[staffI]);
    co1.setAttribute("onclick", "filter(this)");
    co1.style.float = "left";
    co1.style.width = wide;
    co1.innerHTML = '<img src=banners/' + staffB[staffI] + '.png height="auto" width="' + wide + '">';

    co2.setAttribute("id", staffB[staffI + 1]);
    co2.setAttribute("onclick", "filter(this)");
    co2.style.float = "right";
    co2.style.width = wide;
    co2.innerHTML = '<img src=banners/' + staffB[staffI + 1] + '.png height="auto" width="' + wide + '">';

    document.getElementById("staff").appendChild(co1);
    document.getElementById("staff").appendChild(co2);
}

---

希望这能帮助其他人找到这篇文章。

所以，我已经玩了一段时间了，我已经让它顺利地重新创建了我所拥有的功能，但是我似乎无法正确地引用我的其他功能。我发现

td.onclick=function

将始终保留最后一条横幅的参数，这意味着每个横幅将执行它调用的函数的相同部分。你知道我如何解决这个问题吗？试着使用包装函数来创建一个唯一的作用域。类似于

td.onclick=（function（）{//Your code}）（）的东西
function filter(ele) {
    var id = ele.id;
    select (id);
}