javascript - 使用 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>