JavaScriptボタンをクリックすると、それ自身のdivに入力フィールドが追加されます

Question

innerHTML+=を使用して新しい入力フィールドを追加すると、EventListenersに問題が発生します。

<div id="frame"> 

    <input type="button" id="btn"/> 

</div> 

JS

document.getElementById("btn").addEventListener("click",function(){ 
     divframe.innerHTML+=" <input ... />..." 
    }); 

私は単に、ユーザが何度も何度もボタンを押すと、新しい入力やボタンがあるでしょうしたい。（自分自身のEventListener <で - 。不要今）

Answer 1

代わりのinnerHTMLプロパティをウッシングは、は、appendChildを使用して、新しい要素のためにあなたは、のonclickイベントを追加することができます。

<div id="frame"> 
    <input type="button" value="Add" class="addBtn"> 
</div> 
<script>function appendBtn(){ 
    var newBtn = document.createElement("input"); 
    newBtn.onclick = appendBtn; 
    newBtn.value = "Add"; 
    newBtn.classname = "addBtn"; 
    newBtn.type = "button" 
    document.getElementById("frame").appendChild(newBtn); 
} 

document.getElementsByClassName("addBtn")[0].addEventListener("click",function(){ 
    appendBtn() 
})</script> 

Answer 2

divを作成し、divに要素を追加する必要があります。これを試すことができます：

document.getElementById("btn").addEventListener("click", function() { 
    var div = document.getElementById("frame"); 
    var input = document.createElement("INPUT"); 
    div.appendChild(input); 
}); 

まず、以下のボタンが文句を言わない彼のイベントを失うよう

Answer 3

divframe.innerHTML+=...は（インナーHTMLを書き換え、イベントリスナーを削除します存在する場合）。もう一度addEventListenerする必要があります。以下は（役に立たないが働く）コードです。 getElementByIdは同じidの要素を1つだけ返すため、最初のボタンはクリック可能なままであることに注意してください。他の答えで言われているように、appendChildを使用してください。

var divFrame=document.getElementById('frame'); 
 
function setListener(){ 
 
document.getElementById('btn').addEventListener('click', 
 
function(){ 
 
divFrame.innerHTML+=divFrame.innerHTML; 
 
setListener(); 
 
}); 
 
} 
 
setListener();

<div id="frame"> 
 
<input type="button" id="btn" value="click" /> 
 
</div>