Question

我正在尝试创建一个选项，以便在我的网站上添加其他复选框/文本字段。我有一个按钮＆＃34; +＆＃34;链接到一个函数，该函数创建以数字顺序命名的字段。我想在复选框中添加一个事件监听器，它将根据调用它的复选框的名称调用一个需要唯一变量的函数。

<div id="container">
    <input name="+" type="button" id="+" onclick="addInput()" value="+" label="+" />
</div>

<p id=demo>eeeeeeee</p>

var countBox = 1;

function addInput () {
    var breakNode = document.createElement("br");
    breakNode.className = countBox.toString();

    //create checkbox
    var checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.value = "ProgramSpecificBox" + countBox.toString();
    checkbox.name = "ProgramSpecificBox" + countBox.toString();
    checkbox.id = "ProgramSpecificBox" + countBox.toString();

    //create Amount
    var Amount = document.createElement("input");
    Amount.type = "number";
    Amount.value = countBox.toString();
    Amount.name = "ItemCostVis"+ countBox.toString();
    Amount.id = "ItemCostVis" + countBox.toString();

    var container = document.getElementById('container');
    container.appendChild(breakNode);
    container.appendChild(checkbox);
    container.appendChild(Amount);

    checkbox.addEventListener("click", function () {
        testthis(NEED CODE HERE);
    })

    countBox += 1;
}

function testthis (text) {
    document.getElementById("demo").innerHTML = text;
}

我应该把什么代替＆＃34;需要代码在这里＆＃34;得到与调用函数的复选框的id相同？

Answer 1

您可以尝试这样的事情：

checkbox.onclick = function(me){window.alert(me.id)};

Answer 2

而不是：

checkbox.addEventListener("click", function()
{testthis(NEED CODE HERE);
})

countBox += 1;
}

尝试：

checkbox.addEventListener("click", function(e)
    {testthis(e);
    })

countBox += 1;
}

e 参数应该是事件对象。事件对象具有属性 currentTarget ，该属性引用初始化事件的元素。因此，您可以致电：

function testthis(e)
{
    var myvar = e.currentTarget.id;
}

有关示例，请参阅this fiddle。

动态为变量的函数添加事件监听器

2 个答案: