I have a simple function, and need use the index from foreachloop, example:

window.onload = function()
{   
    Array.from(document.getElementsByClassName('image_add_product')).forEach(function(element,index)
    {
        element.addEventListener("change", input_change(index), false);
    });
};

And in input_change function i need the index

function input_change(index)
{
    alert(index);
    alert(this.type);
}

I dont know why, when window load, the change is automatic trigger! Even not change anything. See below:

window.onload = function()
{   
    Array.from(document.getElementsByClassName('image_add_product')).forEach(function(element,index)
    {
        element.addEventListener("change", input_change(index), false);
    });
};

function input_change(index)
{   
    alert(this.type);
    alert(index);
}

<input type="file" class="image_add_product">one
<input type="file" class="image_add_product">two
<input type="file" class="image_add_product">tree

Whats happens?