通过 id 复制和重命名元素时遇到问题

Question

为清楚起见，已编辑以显示所有代码。我运行现在遇到的问题是在复制字段时保持 ui 输入 class 就像我在保留格式之前克隆它的方式一样，但没有以我以前的方式复制能够在克隆时正确重构 id。它要求我提供更多细节，但我认为仅此而已。哦，我还需要在每次添加的末尾添加一个中断以正确格式化，但我还没有抽出时间。

<!DOCTYPE html>
<html>
<head>
<script>
    var ct= 0;
</script>


<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>


<script type="text/template" id="claim_field">
    <div class="ui input">
        <input type="text" placeholder="Claim #" id="claim1">
    </div>
</script>

<script type="text/template" id="sku_field">
    <div class="ui input" id=cpsku>
        <input type="text" placeholder="SKU" id="sku1">
    </div>
    <br>
</script>

<div id="form">
    <div type ="number" id= "requests"> </div>
    <div class="ui input">
        <input type="text" placeholder="Claim #" id="claim0">
</div>
<div class="ui input">
    <input type="text" placeholder="SKU" id="sku0">
</div>
<br>
</div>
<div id="controls">
<button onclick="addRow()" class="ui button">
Add request
</button>
<br><br><br>
<button onclick="submit()" class="ui button">
Submit
</button>
</div>
<script>
function addRow(){
  var start=document.getElementById('form');
  ct+=1;
  
  var clm= document.getElementById('claim0');
  //window.alert(clm);
  var cclone=clm.cloneNode(true);
  var sk= document.getElementById('sku0');
  var sclone=sk.cloneNode(true);
  var e = document.createElement('div');
  
  


    cclone.id= "claim"+(ct.toString());
    //window.alert(cclone.id);
    //window.alert(cclone.innerHTML);
    sclone.id= "sku"+(ct.toString());
    //window.alert(sclone.id);
    //window.alert('gets here');

  
  e.appendChild(cclone);
  e.appendChild(sclone);
  start.appendChild(e);
  //start.appendChild(<br>);
}

function submit(){
      var pairs =[]; // this will contain all the claim #s and skus at the end
      var i;
      //window.alert('value of ct is currently '+ct);
      for(i=0; i< ct;i++){
        //window.alert('ct is still '+ct);
        //window.alert('I is currently '+i);
        var req= [];
        var bit = 'claim'+(i.toString());
        var bot = 'sku'+(i.toString());
        window.alert('currently searching for row '+bit);
        window.alert('claim'+(i+1).toString()+' is '+document.getElementById(bit).value);
        window.alert('sku'+(i+1).toString()+' is '+document.getElementById(bot).value);
      }
  }


</script>

</head>
</html>

Answer 1

我相信你使用了错误的id来获取输入框：

var clm= document.getElementById('claim_field');

请注意，claim_field 是您给 script 标签的 id。

试试这个：

var clm= document.getElementById('claim1');

通过 id 复制和重命名元素时遇到问题

Trouble copying and renaming an element by id

javascript

html

innerhtml

getelementbyid

clonenode