Javascript-將參數函數傳遞給異步onchange事件

Question

晚上好，我對用Javascript構建表單有疑問。 為了避免重復代碼，我想使用相同的功能：

function addCheckBoxItem(p, name, value) {

    // add checkbox
    var newCheckbox = document.createElement("input");
    newCheckbox.type = "checkbox";
    newCheckbox.setAttribute("value", p);
    newCheckbox.setAttribute("id", p);
    newCheckbox.setAttribute("name", name);

     newCheckbox.onchange = function(){ 

            var cbs = document.getElementsByName(name);
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked = false;
            }
            this.checked = true;
            // define the peer selected as choice
            value = this.value;
           // TODO: MY PROBLEM IS HERE
    };

   form.appendChild(newCheckbox);


    // add label to checkbox
    var label = document.createElement('label');
    label.setAttribute("name", name);
    label.htmlFor = p;
    label.appendChild(document.createTextNode(p));

    form.appendChild(label);

    // add br tag to checkbox 
    var br = document.createElement("br")
    br.setAttribute("name", name);
    form.appendChild(br);

}

我在循環內調用函數

for (i = 0; i < array.length; i++) { 
        addCheckBoxItem(array[i].key, nameItemCheckbox, peer_choice);
    }

我知道value = this.value是不可能的，因為onchange事件是異步的，但我想檢索此事件的值並將其與我的參數關聯。 我對這個問題有不同的反應。 其中之一是： 為什么在函數內部修改變量后，變量卻沒有改變？ -異步代碼參考我已經理解了基本概念，但是沒有一個示例與我的問題有關。 有人可以幫我嗎？

編輯-解決方案

感謝@Tibrogargan，我以這種方式修改了我的功能：

for (i = 0; i < array.length; i++) {
        addCheckBoxItem(form, array[i].key, form_peer_available_class, peer_choice, (value) => peer_choice = value);
    }

和

function addCheckBoxItem(p, name, value, callback) {

// add checkbox
var newCheckbox = document.createElement("input");
newCheckbox.type = "checkbox";
newCheckbox.setAttribute("value", p);
newCheckbox.setAttribute("id", p);
newCheckbox.setAttribute("name", name);

 newCheckbox.onchange = function(){ 

        var cbs = document.getElementsByName(name);
        for (var i = 0; i < cbs.length; i++) {
            cbs[i].checked = false;
        }
        this.checked = true;
        // define the peer selected as choice
        callback(this.value);
};

form.appendChild(newCheckbox);


// add label to checkbox
var label = document.createElement('label');
label.setAttribute("name", name);
label.htmlFor = p;
label.appendChild(document.createTextNode(p));

form.appendChild(label);

// add br tag to checkbox 
var br = document.createElement("br")
br.setAttribute("name", name);
form.appendChild(br);

}

Answer 1

像這樣將回調傳遞到addCheckBoxItem中

// accumulator
var data = {}
// callback
var storeData = (name, value, p) => data[name] = value;
// callback as third argument
addCheckBoxItem('data1', 'checkbox1', storeData);
addCheckBoxItem('data2', 'checkbox2', storeData);
addCheckBoxItem('data3', 'checkbox3', storeData);

在此處查看完整示例http://jsfiddle.net/gtqnc109/9/