您能解决的问题是将购物车添加到购物篮并结帐吗？购物车无法将商品添加到购物篮中，如果我尝试添加javascript，我将显示null。我已张贴的所有代码。先感谢您。 cart.html
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart Pure Javascript</title>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<br>
<p id="demo"><table border="1|1"><tbody><tr><td>Product ID</td><td>Product Description</td><td>Quantity</td><td>Price</td><td>Action</td></tr><tr><td>GPS</td><td>Gps tracker</td><td>10</td><td>5</td><td><button type="submit" onclick='deleteProduct("GPS", this);'>Delete Item</button> <button type="submit" onclick='addCart("GPS", this);'>Add to Cart</button></td></tr><tr><td>Alarm</td><td>Alarm door</td><td>1</td><td>10</td><td><button type="submit" onclick='deleteProduct("Alarm", this);'>Delete Item</button> <button type="submit" onclick='addCart("Alarm", this);'>Add to Cart</button></td></tr><tr><td>Car</td><td>Toyota</td><td>1</td><td>200</td><td><button type="submit" onclick='deleteProduct("Car", this);'>Delete Item</button> <button type="submit" onclick='addCart("Car", this);'>Add to Cart</button></td></tr></tbody></table></p> <br>
<h2> Shopping Cart </h2>
<p id="demo2"></p>
<h2>Grand Total:</h2>
<p id="demo3"></p>
</body>
</html>
js.js页面包含javascript代码自动计算添加到购物车和自动删除自动求和以及更多功能，但现在它变为空
var products = [];
var cart = [];
function deleteProduct(product_id, e) {
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
for (var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
// DO NOT CHANGE THE 1 HERE
products.splice(i, 1);
}
}
}
for (var i = 0; i < products.length; i++) {
var productID = document.getElementById("productID").value;
var product_desc = document.getElementById("product_desc").value;
var qty = document.getElementById("quantity").value;
var price = document.getElementById("price").value;
}
function addCart(productID) {
for (var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
var cartItem = null;
for (var k = 0; k < cart.length; k++) {
if (cart[k].product.product_id == products[i].product_id) {
cartItem = cart[k];
cart[k].product_qty++;
break;
}
}
if (cartItem == null) {
var cartItem = {
product: products[i],
product_qty: products[i].product_qty
};
cart.push(cartItem);
}
}
}
renderCartTable();
}
function renderCartTable() {
var html = '';
var ele = document.getElementById("demo2");
ele.innerHTML = '';
html += "<table id='tblCart' border='1|1'>";
html += "<tr><td>Product ID</td>";
html += "<td>Product Description</td>";
html += "<td>Quantity</td>";
html += "<td>Price</td>";
html += "<td>Total</td>";
html += "<td>Action</td></tr>";
var GrandTotal = 0;
for (var i = 0; i < cart.length; i++) {
html += "<tr>";
html += "<td>" + cart[i].product.product_id + "</td>";
html += "<td>" + cart[i].product.product_desc + "</td>";
html += "<td>" + cart[i].product_qty + "</td>";
html += "<td>" + cart[i].product.product_price + "</td>";
html += "<td>" + parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty) + "</td>";
html += "<td><button type='submit' onClick='subtractQuantity(\"" + cart[i].product.product_id + "\", this);'/>Subtract Quantity</button>  <button type='submit' onClick='addQuantity(\"" + cart[i].product.product_id + "\", this);'/>Add Quantity</button>  <button type='submit' onClick='removeItem(\"" + cart[i].product.product_id + "\", this);'/>Remove Item</button></td>";
html += "</tr>";
GrandTotal += parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty);
}
document.getElementById('demo3').innerHTML = GrandTotal;
html += "</table>";
ele.innerHTML = html;
}
function subtractQuantity(product_id)
{
for (var i = 0; i < cart.length; i++) {
if (cart[i].product.product_id == product_id) {
cart[i].product_qty--;
}
if (cart[i].product_qty == 0) {
cart.splice(i,1);
}
}
renderCartTable();
}
function addQuantity(product_id)
{
for (var i = 0; i < cart.length; i++) {
if (cart[i].product.product_id == product_id) {
cart[i].product_qty++;
}
}
renderCartTable();
}
function removeItem(product_id)
{
for (var i = 0; i < cart.length; i++) {
if (cart[i].product.product_id == product_id) {
cart.splice(i,1);
}
}
renderCartTable();
}
为什么添加购物车不起作用？ Java null我
答案 0 :(得分：0)
您应该检查方法并尝试对其进行调试，假设所有方法都使用products数组，并假设其中装有代表所有产品的json对象。
因此，您应该拥有（我为一种产品做到了，其余的都填满了）：
var products = [{product_id: 'GPS', product_price: 5}, ...];
您的addCart方法也有一个错字：将product_id更改为productID以匹配函数参数。
function addCart(productID) {
for (var i = 0; i < products.length; i++) {
if (products[i].product_id == productID) {
var cartItem = null;
for (var k = 0; k < cart.length; k++) {
if (cart[k].product.product_id == products[i].product_id) {
cartItem = cart[k];
cart[k].product_qty++;
break;
}
}
if (cartItem == null) {
var cartItem = {
product: products[i],
product_qty: products[i].product_qty
};
cart.push(cartItem);
}
}
}
renderCartTable();
}
这是添加GPS产品的有效示例。
var products = [{
product_id: 'GPS',
product_price: 5,
product_desc: 'Gps tracker',
product_qty: 1
}];
var cart = [];
function deleteProduct(product_id, e) {
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
for (var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
// DO NOT CHANGE THE 1 HERE
products.splice(i, 1);
}
}
}
function addCart(productID) {
for (var i = 0; i < products.length; i++) {
if (products[i].product_id == productID) {
var cartItem = null;
for (var k = 0; k < cart.length; k++) {
if (cart[k].product.product_id == products[i].product_id) {
cartItem = cart[k];
cart[k].product_qty++;
break;
}
}
if (cartItem == null) {
var cartItem = {
product: products[i],
product_qty: products[i].product_qty
};
cart.push(cartItem);
}
}
}
renderCartTable();
}
function renderCartTable() {
var html = '';
var ele = document.getElementById("demo2");
ele.innerHTML = '';
html += "<table id='tblCart' border='1|1'>";
html += "<tr><td>Product ID</td>";
html += "<td>Product Description</td>";
html += "<td>Quantity</td>";
html += "<td>Price</td>";
html += "<td>Total</td>";
html += "<td>Action</td></tr>";
var GrandTotal = 0;
for (var i = 0; i < cart.length; i++) {
html += "<tr>";
html += "<td>" + cart[i].product.product_id + "</td>";
html += "<td>" + cart[i].product.product_desc + "</td>";
html += "<td>" + cart[i].product_qty + "</td>";
html += "<td>" + cart[i].product.product_price + "</td>";
html += "<td>" + parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty) + "</td>";
html += "<td><button type='submit' onClick='subtractQuantity(\"" + cart[i].product.product_id + "\", this);'/>Subtract Quantity</button>  <button type='submit' onClick='addQuantity(\"" + cart[i].product.product_id + "\", this);'/>Add Quantity</button>  <button type='submit' onClick='removeItem(\"" + cart[i].product.product_id + "\", this);'/>Remove Item</button></td>";
html += "</tr>";
GrandTotal += parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty);
}
document.getElementById('demo3').innerHTML = GrandTotal;
html += "</table>";
ele.innerHTML = html;
}<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart Pure Javascript</title>
</head>
<body>
<p id="demo">
<table border="1|1">
<tbody>
<tr>
<td>Product ID</td>
<td>Product Description</td>
<td>Quantity</td>
<td>Price</td>
<td>Action</td>
</tr>
<tr>
<td>GPS</td>
<td>Gps tracker</td>
<td>10</td>
<td>5</td>
<td>
<button type="submit" onclick='deleteProduct("GPS", this);'>Delete Item</button>
<button type="submit" onclick='addCart("GPS", this);'>Add to Cart</button>
</td>
</tr>
<tr>
<td>Alarm</td>
<td>Alarm door</td>
<td>1</td>
<td>10</td>
<td>
<button type="submit" onclick='deleteProduct("Alarm", this);'>Delete Item</button>
<button type="submit" onclick='addCart("Alarm", this);'>Add to Cart</button>
</td>
</tr>
<tr>
<td>Car</td>
<td>Toyota</td>
<td>1</td>
<td>200</td>
<td>
<button type="submit" onclick='deleteProduct("Car", this);'>Delete Item</button>
<button type="submit" onclick='addCart("Car", this);'>Add to Cart</button>
</td>
</tr>
</tbody>
</table>
</p>
<h2> Shopping Cart </h2>
<p id="demo2"></p>
<h2>Grand Total:</h2>
<p id="demo3"></p>
</body>
</html>