當我點擊一個按鈕時，我的輸入標簽變為空

Question

我制作了一個表單，當我單擊按鈕時添加了一些輸入。 此按鈕的功能是使用javascript制作的。

但是，當我單擊它時，我所有的輸入都變為空，我不希望這樣。 我想將信息保留在已有的輸入中。

怎么了，我該如何解決？

 var div = document.getElementById('participant'); function AjoutParticipant() { var ex = document.getElementsByClassName("bouton_plus"); for (i = 0; i < ex.length; i++) { ex[i].style.display = "none"; } div.innerHTML += '<label>Nom :</label><input type="text" name="nom[]" />' + '<label id="pre-decal">Prenom :</label><input type="text" name="prenom[]" />' + '<label id="ent-decal">Entreprise :</label><input type="text" name="entreprise" /><br/>' + '<button class="bouton_plus" type="button" onclick="AjoutParticipant()"><i class="fa fa-fw fa-plus"></i> Ajouter Participant</button>' } 

 <fieldset id="participant"> <legend>Participant(s)</legend> <label>Nom :</label><input type="text" name="nom[]" /> <label>Prenom :</label><input type="text" name="prenom[]" /> <label>Entreprise :</label><input type="text" name="entreprise" /><br/> <button class="bouton_plus" type="button" onclick="AjoutParticipant()"><i class="fa fa-fw fa-plus"></i> Ajouter Participant</button> </fieldset> 

Answer 1

您正在獲取div的innerHTML ，向其添加一些新的HTML，然后將其分配回去。

HTML中的value 屬性表示默認值，因此當用戶在其中輸入內容時不會更新。

因此，當您覆蓋innerHTML時， innerHTML輸入重置為默認值。

---

不要使用innerHTML 。

相反，可以使用諸如createElement和appendChild類的DOM方法將新內容添加到div中，而無需重寫現有內容。