Adding Text Boxes With Javascript

Question

I am working on some code that will add text boxes when a button is pressed. the problems is when i fill out the info in the text box and then click add it deletes the content.

Im complacently new to java script so i don't know where i went wrong. It looks like its all correct to me.

 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>

when you fill out the first box it should populate the other 2 boxes and then when you press add then there should be 3 more boxes and you should be able to do the same thing.

Answer 1

Yo should do it using insertAdjacentHTML function instead of innerHTML, like this:

 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

谢谢您对我的帮助。