Добрый день уважаемые участники форума, я новичек в js и на стажировке в компании дали задачу, сделать две таблицы, одна с товаром другая, в виде корзины. И когда кликаешь по товару, товар переносится в корзину. Это я сделал, но вот что-то сломал голову никак не могу понять как сделать подсчет суммы и количества товара. Вот мой код на js. Вот как работает на html https://i.sstatic.net/tA9c2.png
let storageMock = [
{id: 1, name: "GeForce GTX 980 Ti", price: 9790, amount: 35},
{id: 2, name: "GeForce GTX TITAN Black", price: 57000, amount: 54},
{id: 3, name: "AMD EPYC 7742", price: 133120, amount: 44},
{id: 4, name: "Intel Xeon W-3175X", price: 175000, amount: 23},
{id: 5, name: "Оперативная память Goodram 4 ГБ", price: 2456, amount: 111},
{id: 6, name: "Оперативная память Hyper-x 2 ГБ", price: 1456, amount: 123},];
let Cart = []
document.addEventListener("DOMContentLoaded", function() {
fillStorageTable(storageMock);
});
function fillStorageTable(items) {
let storageTable = document.getElementById('storage');
items.forEach(e => {
let itemTR = document.createElement('tr');
itemTR.innerHTML = `<td>${e.id}</td><td>${e.name}</td><td>${e.price}</td><td>${e.amount}</td>`;
storageTable.append(itemTR);
itemTR.addEventListener('click', addToCart);
});
}
function addToCart() {
let cartTR = document.createElement("tr");
cartTR.innerHTML = `<td>${this.childNodes[1].textContent}</td><td>${this.childNodes[2].textContent}</td><td>${this.childNodes[3].textContent}</td>`;
document.getElementById('cart').append(cartTR);
}
#storage {
width: 50%;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-collapse: collapse;
text-align: center;
}
th, td:first-child {
background: #AFCDE7;
color: white;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
td {
background: #D8E6F3;
}
th:first-child, td:first-child {
text-align: left;
}
#cart {
width: 50%;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-collapse: collapse;
text-align: center;
}
th, td:first-child {
background: #AFCDE7;
color: white;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
td {
background: #D8E6F3;
}
th:first-child, td:first-child {
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
<style>
td {
text-align: center;
}
</style>
</head>
<body>
<table id="storage">
<tr><td>#</td><td>Товар</td><td>Цена</td><td>Количество</td></tr>
</table>
<h3>Корзина</h2>
<table id="cart">
<tr><td>Товар</td><td>Цена</td></tr>
</table>
<table id="Totalsum">
<tr><td>Сумма</td>
</table>
</body>
</html>