динамически добавить прослушиватель событий для функции с переменной

Question

Я пытаюсь создать опцию для добавления дополнительных флажков/текстовых полей на мой сайт. У меня есть кнопка «+», связанная с функцией, которая создает поля, названные в числовом порядке. Я хотел бы добавить прослушиватель событий к флажку, который вызовет функцию, для которой требуется уникальная переменная, на основе имени этого флажка.

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

Что я должен поставить вместо «NEED код здесь», чтобы получить такой же, как идентификатор флажком, который называется функцией?

Answer 1

Вместо:

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

countBox += 1; 
} 

попробовать:

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

countBox += 1; 
} 

е параметр должен быть объект события. Объект события имеет свойство currentTarget, которое ссылается на элемент, который инициализировал событие. Таким образом, вы можете позвонить:

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

См this fiddle для примера.

Answer 2

Вы можете попробовать что-то вроде этого:

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