0
Я делаю сайт для покупок, на моей странице продуктов есть 2 продукта, когда пользователь выбирает количество из выпадающего списка и нажимает кнопку «Добавить в корзину», изображение продукта, описание, цена, количество и общая стоимость (количество * цена) добавляется в строку таблицы внизу страницы. Моя проблема показывает общее количество выбранных продуктов. Я создал переменные, которые сохраняют общее количество для каждого продукта в своих собственных функциях. если пользователь выбирает первый продукт, вся информация, указанная мной, отображается с полной ценой в строке правильно, но если пользователь затем выбирает второй продукт, информация добавляется в таблицу, но общая стоимость заменяется вторым продуктом, а не суммой обоих продуктов. Есть ли решение?Необходимо принять 2 значения (цены) от двух разных функций onclick, затем отобразить общее количество в таблице
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>