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



为了清晰起见,已编辑以显示所有代码。我现在遇到的问题是,在复制字段时保留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>

我认为您使用了错误的id来获取输入框:

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

请注意,claim_field是您给script标记的id

试试这个:

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

最新更新