-2
私の問題では助けが必要です。これは単なる問題ですが、私はそれを得ることができませんでした。あなたがする必要があるのは、テーブルの下のショッピングカートの総計を計算することだけです。 javascriptのみを使用する必要があり、jqueryは使用できません。皆さんがこの簡単な問題に答えることができることを願っています。みんなありがとう。ショッピングカートの総額Javascriptのみを使用
var products = [];
var cart = [];
function addProduct() {
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;
var newProduct = {
product_id: null,
product_desc: null,
product_qty: 0,
product_price: 0.00,
};
newProduct.product_id = productID;
newProduct.product_desc = product_desc;
newProduct.product_qty = qty;
newProduct.product_price = price;
products.push(newProduct);
var html = "<table border='1|1' >";
html += "<td>Product ID</td>";
html += "<td>Product Description</td>";
html += "<td>Quantity</td>";
html += "<td>Price</td>";
html += "<td>Action</td>";
for (var i = 0; i < products.length; i++) {
html += "<tr>";
html += "<td>" + products[i].product_id + "</td>";
html += "<td>" + products[i].product_desc + "</td>";
html += "<td>" + products[i].product_qty + "</td>";
html += "<td>" + products[i].product_price + "</td>";
html += "<td><button type='submit' onClick='deleteProduct(\"" + products[i].product_id + "\", this);'/>Delete Item</button>   <button type='submit' onClick='addCart(\"" + products[i].product_id + "\", this);'/>Add to Cart</button></td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("demo").innerHTML = html;
document.getElementById("resetbtn").click()
}
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(product_id) {
//Indentify the product and add it to new "cart" array
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) {//Already exists in cart, increment quantity.
cartItem = cart[k];
cart[k].product_qty++;//Increment by one only, as requested.
break;
}
}
if (cartItem == null) {
//Every item in the cart specifies the product in question as well as how many of the product there is in the cart, starts off at product's quantity
var cartItem = {
product: products[i],
product_qty: products[i].product_qty // Start of at product's quantity
};
cart.push(cartItem);
}
break
}
}
renderCartTable();
}
function renderCartTable() {
var html = '';
var ele = document.getElementById("demo2");
ele.innerHTML = ''; //Start by clearng your table of old elements
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>";
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></td>";
html += "</tr>";
var 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--;//decrement by one
}
if (cart[i].product_qty == 0) {
cart.splice(i,1);//Remove from cart
}
console.log("Products " + JSON.stringify(products));
}
//Finally, re-render the cart table
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++;//decrement by one
}
}
//Finally, re-render the cart table
renderCartTable();
}<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart Pure Javascript</title>
</head>
<body>
<form name="order" id="order">
<table>
<tr>
<td>
<label for="productID">Product ID:</label>
</td>
<td>
<input id="productID" name="product" type="text" size="28" required/>
</td>
</tr>
<tr>
<td>
<label for="product">Product Desc:</label>
</td>
<td>
<input id="product_desc" name="product" type="text" size="28" required/>
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input id="quantity" name="quantity" width="196px" required/>
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input id="price" name="price" size="28" required/>
</td>
</tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" >
</form>
<br>
<p id="demo"></p> <br/>
<h2> Shopping Cart </h2>
<p id="demo2"></p>
<p id="demo3"></p>
</body>
</html>var products = [];
var cart = [];
function addProduct() {
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;
var newProduct = {
product_id: null,
product_desc: null,
product_qty: 0,
product_price: 0.00,
};
newProduct.product_id = productID;
newProduct.product_desc = product_desc;
newProduct.product_qty = qty;
newProduct.product_price = price;
products.push(newProduct);
var html = "<table border='1|1' >";
html += "<td>Product ID</td>";
html += "<td>Product Description</td>";
html += "<td>Quantity</td>";
html += "<td>Price</td>";
html += "<td>Action</td>";
for (var i = 0; i < products.length; i++) {
html += "<tr>";
html += "<td>" + products[i].product_id + "</td>";
html += "<td>" + products[i].product_desc + "</td>";
html += "<td>" + products[i].product_qty + "</td>";
html += "<td>" + products[i].product_price + "</td>";
html += "<td><button type='submit' onClick='deleteProduct(\"" + products[i].product_id + "\", this);'/>Delete Item</button>   <button type='submit' onClick='addCart(\"" + products[i].product_id + "\", this);'/>Add to Cart</button></td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("demo").innerHTML = html;
document.getElementById("resetbtn").click()
}
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(product_id) {
//Indentify the product and add it to new "cart" array
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) {//Already exists in cart, increment quantity.
cartItem = cart[k];
cart[k].product_qty++;//Increment by one only, as requested.
break;
}
}
if (cartItem == null) {
//Every item in the cart specifies the product in question as well as how many of the product there is in the cart, starts off at product's quantity
var cartItem = {
product: products[i],
product_qty: products[i].product_qty // Start of at product's quantity
};
cart.push(cartItem);
}
break
}
}
renderCartTable();
}
function renderCartTable() {
var html = '';
var ele = document.getElementById("demo2");
ele.innerHTML = ''; //Start by clearng your table of old elements
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>";
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></td>";
html += "</tr>";
var 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--;//decrement by one
}
if (cart[i].product_qty == 0) {
cart.splice(i,1);//Remove from cart
}
console.log("Products " + JSON.stringify(products));
}
//Finally, re-render the cart table
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++;//decrement by one
}
}
//Finally, re-render the cart table
renderCartTable();
}<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart Pure Javascript</title>
</head>
<body>
<form name="order" id="order">
<table>
<tr>
<td>
<label for="productID">Product ID:</label>
</td>
<td>
<input id="productID" name="product" type="text" size="28" required/>
</td>
</tr>
<tr>
<td>
<label for="product">Product Desc:</label>
</td>
<td>
<input id="product_desc" name="product" type="text" size="28" required/>
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input id="quantity" name="quantity" width="196px" required/>
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input id="price" name="price" size="28" required/>
</td>
</tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" >
</form>
<br>
<p id="demo"></p> <br/>
<h2> Shopping Cart </h2>
<p id="demo2"></p>
<p id="demo3"></p>
</body>
</html>
を編集します。もう一度確認できますか？ –
私は自分でそれを手に入れました。とにかく、ありがとうたくさんのティエン – charles