Javascript-购物车仅添加1件商品，即使购买了2件或5件商品

我的脚本只有HTML和Javascript，我找不到哪里出了问题。我有一个html页面，其中包含8个具有相同html样式的产品。但当我点击产品2或8时，它总是只列出列表中的第一个产品。我不知道我需要做什么才能让它工作。（脚本中的一些文本使用我的母语瑞典语）

HTML代码

 <div id="Tama">
  <h2>TAMA</h2>
  <img src="images/trummor/tama.jpg">
  <br/>
  <p>TAMA Superstar. </p>
  <p>Pris: 25000 kr</p>
  <hr style="border: 1px solid #000;">
  <form name="order">
   <input type="hidden" id="IDnumber" value="004">
   <input type="hidden" id="pris" value="25000">
   <input type="hidden" id="item" value="Tama Superstar">
   Välj antal: 
   <input type="text" id="antal" value="1" name="antal"  onChange="this.value=CKquantity(this.value)" style="width:30px;" maxlength="1"> | 
   <input type="button" value="Köp" onclick="addElement(this.form);">
  </form>
  <hr style="border: 1px solid #000;">
  <p>
   <a href="#drums" onclick="drums()">Tillbaka till produkter</a>
  </p>
 </div>

塔玛


塔玛是个超级明星

Pris:25000韩元

Javascript购物车文件

// -- CHECK IF ANTAL IS A NUMBER -- //
function CKquantity(checkString) {
  var strNewQuantity = "";

  for ( i = 0; i < checkString.length; i++ ) {
  ch = checkString.substring(i, i+1);
  if ( (ch >= "0" && ch <= "9") || (ch == '.') )
     strNewQuantity += ch;
  }

  if ( strNewQuantity.length < 1 )
  strNewQuantity = "1";

  return(strNewQuantity);
 }

 // -- ADD TO CART -- //
 // still problem - only enter the first item on the list either you click on the
  second or last product

function addElement(thisForm)
 { 
var itemId = document.getElementById('IDnumber').value
var itemName = document.getElementById('item').innerHTML;

var antal = document.getElementById('antal').value;
var pris = document.getElementById('pris').value;

var parent = document.getElementById('cart'); 
var newElement = document.createElement('li'); 
newElement.setAttribute('class','item');

var sum = antal * pris;

newElement.innerHTML = "("+itemId+") "+ antal + " x " + itemName + " - " + pris + " kr, Totalt: " + sum + " kr";
parent.appendChild(newElement);
}

/--ANTAL是否为数字--//
函数CKquantity（检查字符串）{
var strNewQuantity=“”；
对于（i=0；i如果（（ch>=“0”&&chJavaScript是区分大小写的脚本语言，这意味着它的关键字应该写在
正确的大小写中
。你应该写
函数
，而不是
函数

试试这个：

function addElement()
{ 
var itemName = document.getElementById('item').innerHTML;
var antal = document.getElementById('antal').value; // 'value' not 'VALUE'

var parent = document.getElementById('cart'); 
var newElement = document.createElement('li'); 
newElement.setAttribute('class','item'); 
newElement.innerHTML = antal + " x " + itemName; 
parent.appendChild(newElement);
}

你听说过JS中的区分大小写吗？HTML id必须是唯一的…你应该给每个项目一个不同的id（例如，
item_111
和项目id左右，而不仅仅是
item
）是的，但我不知道我必须拥有所有。你的
document.getElementById（'antal'））.VALUE
将是未定义的，因为，正如您所写的-Js区分大小写。Thanx！它可以工作，但如何让它输入单个对象而不是购物车中的同一对象。现在它列出了第一个产品，即使我在最后一个产品上klick buy（köp）。或者我应该说look after id“item”然后将id用于项目111、项目222等等。对不起，我不确定你想问什么。如果需要，你能用一些例子解释一下吗（你可以在问题中添加这个）。如果您询问如何在页面中的不同对象上进行迭代，则可以使用
document.getElementById（'IDHere'）指定它们各自的
唯一ID
Sajjad：我编辑了Q，在顶部你可以看到新的东西。因为你真正的问题已经得到了回答，你的新问题是全新的，所以我建议你
将这个答案标记为答案
，并在下一个查询中发布新的问题，这也会对社区有所帮助，否则标题/问题/answer完全会误导你，谢谢。