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

Question

我的脚本只有 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>

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);
}

Answer 1

JavaScript 是区分大小写的脚本语言，这意味着它的关键字应该写在right-case 中。你应该写function 而不是FUNCTION。

试试这个：

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);
}