0
私はショッピングサイトを作っています。私の商品ページにはドロップダウンリストから数量を選択し、カートに追加ボタンをクリックすると、商品画像、説明、価格、数量、合計金額（数量*価格）がページ下部の表の行に追加されます。私の問題は、複数の選択された製品の合計を示しています。私は、各製品の合計を独自の関数に格納する変数を作成しました。ユーザが第1の製品を選択した場合、言及したすべての情報が行の総価格とともに正しく表示されるが、ユーザが第2の製品を選択すると、その情報がテーブルに追加されるが、合計価格は合計を加算するのではなく、両方の製品の解決策はありますか？2つの異なるonclick関数から2つの値（価格）を取る必要があります。合計をテーブルに表示します
var count1 = 0;
var count2 = 0;
var count3 = 0;
var count4 = 0;
var quan;
var totalArray = [];
var priceArray = [13.99, 249.99];
console.log(priceArray);
console.log(priceArray[1]);
document.getElementById('btn3').onclick = function() {
if (count3 == 0) {
var table = document.getElementById("table"); //This adds a row after every click
var row = table.insertRow(0);
var product = row.insertCell(0);
var desc = row.insertCell(1);
var price = row.insertCell(2);
var quantity = row.insertCell(3);
count3++;
product.innerHTML = " <img src='images/mouse.jpg' id='img2' width='160px' height='200px'>";
desc.innerHTML = document.getElementById("desc3").innerHTML; //prints quantity
price.innerHTML = "$" + priceArray[0] + " per item"; //prints quantity
var selectedText = list3.options[list3.selectedIndex].innerHTML;
var selectedValue = list3.value;
quantity.innerHTML = selectedValue;
document.getElementById('hcart').innerHTML = "Your Cart (1) Product";
console.log(count3);
var total = selectedValue * 13.99;
totalArray[1] = total;
document.getElementById('total').innerHTML = parseInt(total);
} else {
alert("Product already entered");
}
};
//------------------------btn4-------------------------------------------------
var myQuantity;
var myPrice;
var total = 0;
document.getElementById('btn4').onclick = function() {
if (count4 == 0) {
var table = document.getElementById("table"); //This adds a row after every click
var row = table.insertRow(0);
var product = row.insertCell(0);
var desc = row.insertCell(1);
var price = row.insertCell(2);
var quantity = row.insertCell(3);
count4++;
product.innerHTML = " <img src='images/tab.jpg' id='img2' width='160px' height='200px'>";
desc.innerHTML = document.getElementById("desc4").innerHTML; //prints quantity
price.innerHTML = "$" + priceArray[1] + " per item"; //prints quantity
var selectedText = list1.options[list1.selectedIndex].innerHTML;
var selectedValue = list1.value;
quantity.innerHTML = selectedValue;
document.getElementById('hcart').innerHTML = "Your Cart (1) Product";
console.log(count4);
total = selectedValue * priceArray[1];
console.log(totalArray);
document.getElementById('total').innerHTML = parseInt(total);
} else {
alert("Product already entered");
}
};<div id="prod2">
<div id="img">
<img src="images/mouse.jpg" id="img2">
</div>
<div id="desc">
<h3>Description</h3>
<p id="desc3">TeckNet TruWave technology: Provide precise, smart cursor control over many surface types. TeckNet CoLink technology: After pairing there's no need to re-establish pairing after a signal loss or shutdown.</p>
</div>
<div id="quan">
<h3>Price</h3>
<h5 id="p_amount3">CDN: $13.99</h5>
</div>
<div id="amount">
<h3>Purchase</h3>
<select name="quantity" id="list3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" id="btn3" value="Add to Cart">
</div>
</div>
<!---Product4---------------------------------------------->
<div id="prod2">
<div id="img">
<img src="images/tab.jpg" id="img2">
</div>
<div id="desc">
<h3>Description</h3>
<p id="desc4">Samsung Galaxy Tab A SM-T350NZAAXAR 8.0 inch 1.5 GHz, 16GB, Android 5.0 Lollipop Tablet, Smoky Titanium. Keep All Your Samsung Devices In Sync. Connecting your Samsung devices is easier than ever. With Samsung Side Sync 3.0 and Quick Connect, you
can share content and work effortlessly between your Samsung tablet</p>
</div>
<div id="quan">
<h3>Price</h3>
<h5 id="p_amount4">CDN: $249.99</h5>
</div>
<div id="amount">
<h3>Purchase</h3>
<select name="quantity" id="list1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" id="btn4" value="Add to Cart" onclick="total()">
</div>
</div>
</fieldset>
<!--Cart------------------------------------------------->
<h1 id="hcart">Your Cart(Empty)</h1>
<table cellpadding="4" cellspacing="4" border="0" id="myCart" style="width:100%">
<thead>
<tr>
<td>
<h4>Name</h4>
</td>
<td>
<h4>Description</h4>
</td>
<td>
<h4>Price</h4>
</td>
<td>
<h4>Quantity</h4>
</td>
</tr>
</thead>
</table>
<div id="lists">
<table style="width:100%" border="1px" id="table" height="10px">
</table>
<table style="width:100%" border="1px" id="table2" height="10px">
<tr>
<td>
<h4>Total</h4>
</td>
<td>
<h4 id="total">Empty</h4>
</td>
</table>