使用 Javascript 添加文本框

Question

我正在編寫一些代碼，當按下按鈕時會添加文本框。 問題是當我在文本框中填寫信息然后單擊添加它會刪除內容。

我對 Java 腳本還很陌生，所以我不知道我哪里出錯了。 它看起來對我來說都是正確的。

 var countBox = 1; var boxName = 0; function addInput() { var boxName = "textBox" + countBox; document.getElementById('responce').innerHTML += 'Opp Code <input type="text" onkeyup="checkvalue(this.id)" value="tes" id="opp_' + boxName + '"> '; document.getElementById('responce').innerHTML += 'Item<input type="text" id="dec_' + boxName + '"> '; document.getElementById('responce').innerHTML += 'Price<input type="text" id="pri_' + boxName + '"> <br>'; countBox += 1; } document.getElementById('responce').innerHTML += 'total<br><input type="text" id="total"> <br>'; function checkvalue(clicked_id) { // var count = countBox - 1; var textarea = document.getElementById(clicked_id); var n1 = document.getElementById(clicked_id); var opp = document.getElementById(clicked_id).value; var dec = "dec"; var pri = "pri"; var res = clicked_id.substr(3); var dec = dec + res; var pri = pri + res; if (opp == "wv") { var description = "Wash & Vac"; var price = "12.99"; } else { var description = ""; var price = ""; } document.getElementById(dec).value = description; document.getElementById(pri).value = price; }

 <input type="button" value="add" onclick="addInput()"> <p id="demo"></p> <span id="responce"></span>

當您填寫第一個框時，它應該填充其他 2 個框，然后當您按添加時，應該還有 3 個框，您應該能夠做同樣的事情。

Answer 1

您應該使用insertAdjacentHTML函數而不是innerHTML來做到這一點 ，就像這樣：

 let countBox =1; let boxName = 0; const $responce = document.getElementById('responce') function addInput() { let boxName="textBox"+countBox; let template = "" template += 'Opp Code <input type="text" onkeyup="checkvalue(this.id)" value="tes" id="opp_'+boxName+'"> '; template += 'Item<input type="text" id="dec_'+boxName+'"> '; template += 'Price<input type="text" id="pri_'+boxName+'"> <br>'; $responce.insertAdjacentHTML('beforeend', template); countBox++; } // i don't know why this sentence is out of some function /*document.getElementById('responce').innerHTML += 'total<br><input type="text" id="total"> <br>';*/ function checkvalue(clicked_id) { // var count = countBox - 1; var textarea = document.getElementById(clicked_id); var n1 = document.getElementById(clicked_id); var opp = document.getElementById(clicked_id).value; var dec = "dec"; var pri = "pri"; var res = clicked_id.substr(3); var dec = dec + res; var pri = pri + res; if (opp == "wv") { var description = "Wash & Vac"; var price = "12.99"; } else { var description = ""; var price = ""; } document.getElementById(dec).value = description; document.getElementById(pri).value = price; } 

 <input type="button" value="add" onclick="addInput()"/> <p id="demo"></p> <span id="responce"></span> 

Answer 2

謝謝您對我的幫助。