Javascript 按id复制和重命名元素时出现问题_Javascript_Html_Innerhtml_Getelementbyid_Clonenode

Javascript 按id复制和重命名元素时出现问题

javascript html

Javascript 按id复制和重命名元素时出现问题,javascript,html,innerhtml,getelementbyid,clonenode,Javascript,Html,Innerhtml,Getelementbyid,Clonenode,为清晰起见，编辑以显示所有代码。我现在遇到的问题是在复制字段时保留ui输入类，就像我在保留格式之前克隆字段的方式一样，但复制时没有以我在克隆时能够正确重构id的方式进行。它要求我提供更多的细节，但我认为仅此而已。哦，我还需要在每次添加的末尾添加一个分隔符，以获得正确的格式，但我只是还没来得及去做 <!DOCTYPE html> <html> <head> <script> var ct= 0; </script> <s

为清晰起见，编辑以显示所有代码。我现在遇到的问题是在复制字段时保留ui输入类，就像我在保留格式之前克隆字段的方式一样，但复制时没有以我在克隆时能够正确重构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>


var-ct=0；




添加请求




提交
函数addRow（）{
var start=document.getElementById（'form'）；
ct+=1；
var clm=document.getElementById（'claim0'）；
//窗口警报（clm）；
var cclone=clm.cloneNode（真）；
var sk=document.getElementById（'sku0'）；
var sclone=sk.cloneNode（真）；
var e=document.createElement（'div'）；
cclone.id=“claim”+（ct.toString（））；
//window.alert（cclone.id）；
//window.alert（cclone.innerHTML）；
sclone.id=“sku”+（ct.toString（））；
//窗口警报（sclone.id）；
//window.alert（'gethere'）；
e、 儿童（克隆）；
e、 附肢儿童（sclone）；
开始。追加子项（e）；
//start.appendChild（
）；
}
函数提交（）{
var pairs=[]；//最后将包含所有索赔和SKU
var i；
//window.alert（'当前ct值为'+ct）；
对于（i=0；i

我相信您使用了错误的

id

获取输入框：

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

请注意，

claim\u字段

是您提供的

script

标记的

id

请尝试以下方法：

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

您正在更改克隆的

元素的id，而不是itI中的div。请参阅。。。不过，我当时遇到的问题是，它丢失了原始div的ui输入格式。从您的示例中可以清楚地看出，您没有发布所有代码。引用了变量

ct

，但从未定义，并且从未定义ID为

表单的元素。您最好发布一个工作代码示例。有可能的是，如果您为正在追加的克隆输入获取的样式不同，那么您可能没有将其追加到与其他输入相同的父级。类似于clm.parent.appendChild（cclone）
的东西可能会起作用。抱歉，我编辑了这篇文章以包含所有代码。