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 that you have read and understand our privacy policy and code of conduct.

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