通过事件处理程序将参数从一个函数发送到另一个函数

Question

I have two functions here, the first one is triggered by a button and it is meant to trigger a second function which will change the inner html of that first buttons accompanying html area.

My problem is how to pass the arguments from the first function INTO the second one to the button and textfield have the same idnumber.

    function doLoad(idnumber, id) {
        var file = _(id).files[0];
        _("Btn1_QP_"+idnumber).style.display = "none";
        _("Display_QP_"+idnumber).innerHTML = "Image uploading......";
        var formdata = new FormData();
        formdata.append("stPic", file);
        var ajax = new XMLHttpRequest();
        ajax.addEventListener("load", completeHandler, false);
        ajax.open("POST", "pho_stem3.php");
        ajax.send(formdata);    
     }

    function completeHandler(event) {
        _("Display_QP").innerHTML = 'wahooo';
    } 
}

In function doLoad idnumber is given by the button and used to identify the proper button with ("Btn1_QP_"+idnumber)

how can i achieve this same selective ability in the second function completeHandler in the event listener.

I have tried

ajax.addEventListener("load", completeHandler(idnumber), false);
ajax.addEventListener("load", ("completeHandler"+idnumber), false);

both dont work. how can i preserve and transmit the original argument from doLoad...

Answer 1

You can pass the same id number in response of ajax like this:

function doLoad(idnumber, id) {
    var file = _(id).files[0];
    _("Btn1_QP_" + idnumber).style.display = "none";
    _("Display_QP_" + idnumber).innerHTML = "Image uploading......";
    var formdata = new FormData();
    formdata.append("stPic", file);
    var ajax = new XMLHttpRequest();        
    ajax.open("POST", "pho_stem3.php");
    ajax.send(formdata);

    ajax.onreadystatechange = function() {
    if (ajax.readyState == 4) {
         completeHandler(idnumber);
    }
}
}

function completeHandler(idnumber) {
   _("Display_QP_" + idnumber).innerHTM = 'wahooo';
}