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

Javascript - 购物车只增加1件商品，即使买入2件或5件商品也是如此

1 个答案: