1

Добрый день уважаемые участники форума, я новичек в js и на стажировке в компании дали задачу, сделать две таблицы, одна с товаром другая, в виде корзины. И когда кликаешь по товару, товар переносится в корзину. Это я сделал, но вот что-то сломал голову никак не могу понять как сделать подсчет суммы и количества товара. Вот мой код на js. Вот как работает на html https://i.stack.imgur.com/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>

1 ответ 1

1

Очень грубое решение, но работает. Объявляете глобальную переменную Sum = 0. А в addToCart добавляете:

Sum += parseInt(this.childNodes[2].textContent.toString());
document.getElementById('sum').innerHTML = Sum;

Далее таблицу с суммой пишете вот так:

    <table id="Totalsum">
        <tr><td>Сумма</td>
        <td id='sum'>0</td></tr> 
    </table>
4
  • Это получается он просто выведет цену? Без суммирования?
    – Nake
    30 окт 2019 в 9:49
  • Надо получается мне сделать так, что бы цена друг на друга накладывалась при клике, верно?) Извиняюсь за нубизм)
    – Nake
    30 окт 2019 в 9:50
  • Всё разобрался, я объявил не там переменную, спасибо за ответ.
    – Nake
    30 окт 2019 в 9:59
  • Правильным вариантом конечно было бы отказаться от глобальной переменной и в момент добавления в корзину вычитывать, что записано в поле сумма и уже работать с этим значением. Т.к. следующей задачей, я полагаю, будет удаление товара из корзины и пересчет суммы :)
    – balamutik
    30 окт 2019 в 10:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.