如何克隆DOM结构和javaScript计算来处理克隆？

我在class.card中创建了一些代码，还创建了一个javascript函数来克隆这张卡。 卡的内部有另一个执行简单计算的功能。问题发生在我克隆卡时，因为第一张卡工作正常，但其他卡根本不做任何计算。 我注意到的另一个问题是，第一张卡上字段的值已经…嗯，这些值也被克隆了，但目的是使一张非常空的字段成为新卡

<div id="card" class="card"> 
<!-- And here comes all the card contets -->
</div>

<!-- And here is suposed to hold the new content with no filled fiels but with calcutations woking -->
<div id="clone"></div>


    //this is supposed to clone the fist card
    function add_card(){
    var theCard = document.getElementById('card');  //takes the HTML id leftSide to the theLeftSide var
    var cardClone = theCard.cloneNode(true);//cloning (float)
    clone.appendChild(cardClone);//cloning (paste)
}


 //And this should be doing some simple calcs
    function calc_item(){
    var val_preco = document.getElementById('preco').value;
    var val_peso = document.getElementById('peso').value;

     var relacao_preco = val_preco / val_peso;
     document.getElementById('preco_grama').innerHTML = (relacao_preco);
    }

//这应该是复制第一张牌
函数add_card（）{
var theCard=document.getElementById（'card'）；//将HTML id左侧带到左侧的变量
var cardClone=card.cloneNode（true）；//克隆（float）
clone.appendChild（cardClone）；//克隆（粘贴）
}
//这应该是做一些简单的计算
函数计算项（）{
var val_preco=document.getElementById（'preco'）.value；
var val_peso=document.getElementById（'peso'）.value；
var relacao_preco=val_preco/val_peso；
document.getElementById（'preco_-grama'）。innerHTML=（relacao_-preco）；
}

---

那么…我做错了什么？

第一个问题是你不能在一个页面中重复ID…根据定义，它们是唯一的

您可以使用获取页面中的第一个匹配项。在这种情况下，可以使用类“卡”作为选择器

在下面我存储了一个初始克隆。然后每次需要一个新的克隆。然后，您可以根据需要修改克隆的内容

对于计算，使用获取要迭代的元素集合。我不知道你的计算是什么，我只是把所有卡片上的数字加起来，显示它在工作

var cardCount=1
//立即存储克隆
var storedClone=document.querySelector（'.card'）.cloneNode（true）；
函数add_card（）{
//克隆原始克隆
var cardClone=storedClone.cloneNode（true）；//克隆（float）
//更新克隆的内容
cardClone.textContent='Card'+（++cardCount）；
clone.appendChild（cardClone）；//克隆（粘贴）
}
函数计算项（）{
var合计=0；
var cards=document.queryselectoral（'.card'）；
卡。forEach（功能（el）{
总计+=+/\d+/.exec（el.textContent）；
});
document.getElementById（'total'）.innerHTML='Card total='+total；
}

#克隆{
边框：2个实心#ccc
}

添加卡计算
卡总数=1
卡1

第一个问题是，您不能在页面中重复ID…根据定义，它们是唯一的

您可以使用获取页面中的第一个匹配项。在这种情况下，可以使用类“卡”作为选择器

在下面我存储了一个初始克隆。然后每次需要一个新的克隆。然后，您可以根据需要修改克隆的内容

对于计算，使用获取要迭代的元素集合。我不知道你的计算是什么，我只是把所有卡片上的数字加起来，显示它在工作

var cardCount=1
//立即存储克隆
var storedClone=document.querySelector（'.card'）.cloneNode（true）；
函数add_card（）{
//克隆原始克隆
var cardClone=storedClone.cloneNode（true）；//克隆（float）
//更新克隆的内容
cardClone.textContent='Card'+（++cardCount）；
clone.appendChild（cardClone）；//克隆（粘贴）
}
函数计算项（）{
var合计=0；
var cards=document.queryselectoral（'.card'）；
卡。forEach（功能（el）{
总计+=+/\d+/.exec（el.textContent）；
});
document.getElementById（'total'）.innerHTML='Card total='+total；
}

#克隆{
边框：2个实心#ccc
}

添加卡计算
卡总数=1
卡1

完整的东西已打开完整的东西已打开