Задался вопросом.
Делаю в рамках курсов по JS подобие корзины для сайта.
Сделал подсчет товаров в корзине, меняем количество, тоже все хорошо.
Но я решил пойти дальше и выводить эти товары на страницу.
Я по-сути пересчитываю for-ом и помещаю с помощью document.write.
Но или я не знаю как или document.write не может поместить в нужное место (к примеру, мне бы хотелось поместить все в блок cart_content.
Пробовал с inner.HTML, тогда выводится только последний товар.
Код ниже:
<body>
<div id="cart_content">
</div>
</body>
"use strict";
let bucket = [
{id: 1, trademark: 'Apple', device: 'notebook', model: 'Macbook Pro 15', img: '1.jpeg', price: 102800, count: 3, residue: 0},
{id: 2, trademark: 'Lenovo', device: 'notebook', model: 'Yoga 5', img: '2.png', price: 61200, count: 2, residue: 20},
{id: 5, trademark: 'Samsung', device: 'notebook', model: 'NP558', img: '3.jpg', price: 54900, count: 4, residue: 19},
{id: 3, trademark: 'Samsung', device: 'notebook', model: 'NP538', img: '4.jpeg', price: 54930, count: 1, residue: 10}
];
function countPrice() {
let summ = 0;
for (let r = 0; r < bucket.length; r++) {
summ += bucket[r].price * bucket[r].count;
}
let ms = '<p> Общая сумма: ' + summ + ' руб.<hr></p><br> Выбранные товары:' +
'<hr>';
return ms;
}
countPrice();
document.write(countPrice());
function productsFromBucket() {
let numbersOfProduct = bucket.length;
for (let i = 0; i <= numbersOfProduct; i++) {
let md =
'<div class="item_box">' +
'<div class="image_box">' +
'<img src="' + bucket[i].img + '" alt="1">' +
'</div>' +
'<div class="item_text">' +
'<h2 class="item_title">' + bucket[i].model + '</h2>' +
'<p class="item_title">Выбрано: ' + bucket[i].count + ' шт.</p>' +
'<p> Цена: ' + '<span class="item_price">' + bucket[i].price + '</span>' + ' RUB</p>' +
'</div>' +
'</div>';
document.write(md);
}
}
productsFromBucket();
Ссылка на песочницу:
https://jsfiddle.net/vpris/a1q720Ly/8/
Еще вопрос насчет ошибки в консоли:
Uncaught TypeError: Cannot read property 'img' of undefined
at productsFromBucket (scripts.js:49)
at scripts.js:60
Как я понял, она появляется потому, что браузер смотрит в переменную до пересчета в for и видит, что она не определена. Тогда надо видимо определить ее заранее пустой или со значением 0, чтобы браузер не считал это ошибкой?
Простой
