動的に追加された要素は表示されませんonChange

Question

add()という関数内にこのJavaScriptコードがあります。

var newinput = document.createElement('div'); 
newinput.innerHTML = "<br><input type='file' id='" + counter + 
"'name='filename[" + counter + 
"]' accept='image/jpeg' onchange='add()'>"; 
document.getElementById('asd').appendChild(newinput); 

しかし、その代わりに、私はこの新しい関数やりたいこのinnerHTMLプロパティの：これまで

var newinput = document.createElement('input'); 
newinput.id=x; 
newinput.type="file"; 
newinput.name="filename"; 
newinput.accept="image/jpeg"; 
newinput.onchange=add(); 

を、新しい機能は、最初の関数のinnerHTMLのような入力を作成しますが、追加されることはありませんonchangeプロパティ（およびフル作成した入力にもdisapearsは、私はコメントする必要はあり.onchange()。

私はのcreateElementのVARに「.onchange」を追加するかのようなカップルの入力のためのJavaScriptのリスナーを作成することができる方法はありますinput.onchange() = function(){}？
ありがとうございます。

Answer 1

現在のところ、add()は関数を返すと予想しています。機能を呼び出すだけしないでください：ここでは

newinput.onchange = add; 

(function() { 
 

 
    function add() { 
 
    console.log("Added."); 
 
    } 
 

 
    function createFileInput(x) { 
 
    var newinput = document.createElement('input'); 
 
    newinput.id = x; 
 
    newinput.type = "file"; 
 
    newinput.name = "filename"; 
 
    newinput.accept = "image/jpeg"; 
 
    newinput.onchange = add; 
 
    return newinput; 
 
    } 
 

 
    document.body.appendChild(createFileInput('my-input')); 
 

 
})();

---

は、あなたが何をしていたの例だと、それがどのように動作するか：

(function() { 
 

 
    function add() { 
 
    return function() { 
 
     console.log("Added."); 
 
    } 
 
    } 
 

 
    function createFileInput(x) { 
 
    var newinput = document.createElement('input'); 
 
    newinput.id = x; 
 
    newinput.type = "file"; 
 
    newinput.name = "filename"; 
 
    newinput.accept = "image/jpeg"; 
 
    newinput.onchange = add(); 
 
    return newinput; 
 
    } 
 

 
    document.body.appendChild(createFileInput('my-input')); 
 

 
})();