Списък от масив в JavaScript: render() от данните

Проблем

Кошницата лъже

Купувачът добавя хляб и мляко. Редовете в кошницата са верни, сумата е вярна, а горе пише „Кошница (0)“. Натисни двата бутона „Добави“ и виж брояча.

HTML, CSS, JS

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Кошница</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <header>
      <a href="/">Магазинът</a>
      <a href="/cart" id="badge">Кошница (0)</a>
    </header>
    <main>
      <h1>Хляб и мляко</h1>
      <ul id="products"></ul>
      <h2>Кошницата</h2>
      <ul id="cart"></ul>
      <p id="total">Общо: 0,00 €</p>
    </main>
  </body>
</html>

body { font-family: system-ui, sans-serif; margin: 0; }
header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; }
main { padding: 0 16px; }
li { margin: 4px 0; }
button { font: inherit; margin-left: 8px; }

const products = [
  { id: 1, name: 'Бял хляб', price: 1.2 },
  { id: 5, name: 'Прясно мляко', price: 1.6 },
  { id: 7, name: 'Сирене', price: 7.9 },
  { id: 10, name: 'Ябълки', price: 2.1 },
];
const cart = [];
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

const badge = document.querySelector('#badge');
const cartList = document.querySelector('#cart');
const total = document.querySelector('#total');
const sum = () => cart.reduce((s, p) => s + p.price, 0);

function productItem(product) {
  const li = document.createElement('li');
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = 'Добави';
  button.setAttribute('aria-label', `Добави ${product.name}`);
  button.addEventListener('click', () => add(product));
  li.append(`${product.name}, ${money(product.price)}`, button);
  return li;
}
document.querySelector('#products').replaceChildren(...products.map(productItem));

function add(product) {
  cart.push(product);
  // 2. редът в кошницата
  const li = document.createElement('li');
  li.textContent = product.name;
  cartList.append(li);
  // 3. сумата
  total.textContent = `Общо: ${money(sum())}`;
  // 1. броячът горе: забравен
}

const badge = document.querySelector('#badge');
const cartList = document.querySelector('#cart');
const total = document.querySelector('#total');
const sum = () => cart.reduce((s, p) => s + p.price, 0);

function add(product) {
  cart.push(product);
  // 2. редът в кошницата
  const li = document.createElement('li');
  li.textContent = product.name;
  cartList.append(li);
  // 3. сумата
  total.textContent = `Общо: ${money(sum())}`;
  // 1. броячът горе: забравен
}

Конзолата е празна. Всяко място на страницата е обновено с отделен ред код в add, и за брояча такъв ред няма. Браузърът не знае, че трите места показват едно и също. Затова никой не забелязва грешката, освен купувача.

Идеята

От масив към списък

Продуктите идват като данни: масив от обекти с име и цена. Страницата трябва да ги покаже като елементи от списък. Пътят е един и същ за всеки списък:

function productItem(product) {
  const li = document.createElement('li');
  li.textContent = `${product.name}, ${money(product.price)}`;
  return li;
}

list.replaceChildren(...products.map(productItem));

document.createElement('li') създава нов елемент. Той още не е в страницата.
textContent слага текста. Името на продукта е текст, а не HTML, затова никой символ в него не става таг.
products.map(productItem) прави от всеки продукт по един <li>: масив от елементи.
list.replaceChildren(...) маха старите деца на списъка и слага новите. ... разпъва масива на отделни аргументи.

Това се казва рисуване на списък от данни: данните са в JavaScript, а страницата се строи от тях с функция.

Виж го

Каталогът

HTML, CSS, JS

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Хляб и мляко</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <main>
      <h1>Хляб и мляко</h1>
      <ul id="products"></ul>
    </main>
  </body>
</html>

body { font-family: system-ui, sans-serif; margin: 0; }
header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; }
main { padding: 0 16px; }
li { margin: 4px 0; }
button { font: inherit; margin-left: 8px; }

const products = [
  { id: 1, name: 'Бял хляб', price: 1.2 },
  { id: 5, name: 'Прясно мляко', price: 1.6 },
  { id: 7, name: 'Сирене', price: 7.9 },
  { id: 10, name: 'Ябълки', price: 2.1 },
];
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

function productItem(product) {
  const li = document.createElement('li');
  li.textContent = `${product.name}, ${money(product.price)}`;
  return li;
}

const list = document.querySelector('#products');
list.replaceChildren(...products.map(productItem));

Смени цената на хляба в масива и натисни „Изпълни“. Не пипаш HTML-а: списъкът следва данните. Добави пети продукт в масива и той се появява като пети ред.

Пробвай

Само наличните

Покажи в списъка само продуктите, които са в наличност (stock е по-голямо от 0). Под списъка, в #count, напиши колко са: „Налични: 3 от 5“.

HTML, CSS, JS

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Хляб и мляко</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <main>
      <h1>Хляб и мляко</h1>
      <ul id="products"></ul>
      <p id="count"></p>
    </main>
  </body>
</html>

body { font-family: system-ui, sans-serif; margin: 0; }
header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; }
main { padding: 0 16px; }
li { margin: 4px 0; }
button { font: inherit; margin-left: 8px; }

const products = [
  { id: 1, name: 'Бял хляб', price: 1.2, stock: 40 },
  { id: 4, name: 'Баница със сирене', price: 2.5, stock: 0 },
  { id: 5, name: 'Прясно мляко', price: 1.6, stock: 35 },
  { id: 13, name: 'Краставици', price: 2.8, stock: 0 },
  { id: 10, name: 'Ябълки', price: 2.1, stock: 80 },
];
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

function productItem(product) {
  const li = document.createElement('li');
  li.textContent = `${product.name}, ${money(product.price)}`;
  return li;
}

const list = document.querySelector('#products');
const count = document.querySelector('#count');
list.replaceChildren(...products.map(productItem));

Решение

index.html

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Хляб и мляко</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <main>
      <h1>Хляб и мляко</h1>
      <ul id="products"></ul>
      <p id="count"></p>
    </main>
  </body>
</html>

style.css

body { font-family: system-ui, sans-serif; margin: 0; }
header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; }
main { padding: 0 16px; }
li { margin: 4px 0; }
button { font: inherit; margin-left: 8px; }

script.js

const products = [
  { id: 1, name: 'Бял хляб', price: 1.2, stock: 40 },
  { id: 4, name: 'Баница със сирене', price: 2.5, stock: 0 },
  { id: 5, name: 'Прясно мляко', price: 1.6, stock: 35 },
  { id: 13, name: 'Краставици', price: 2.8, stock: 0 },
  { id: 10, name: 'Ябълки', price: 2.1, stock: 80 },
];
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

function productItem(product) {
  const li = document.createElement('li');
  li.textContent = `${product.name}, ${money(product.price)}`;
  return li;
}

const list = document.querySelector('#products');
const count = document.querySelector('#count');
const inStock = products.filter((p) => p.stock > 0);
list.replaceChildren(...inStock.map(productItem));
count.textContent = `Налични: ${inStock.length} от ${products.length}`;

Идеята

Едни данни, три места

Кошницата е масив cart. Страницата го показва три пъти: броя горе, редовете и сумата. При всяка промяна на cart трите места трябва да се сменят заедно.

На ръка това значи: всяка функция, която променя cart, пипа всяко място, което го показва. add пипа редовете и сумата. remove пипа редовете, сумата и брояча. Утре идва четвърто място, например „Безплатна доставка над 30 €“, и трябва да се сети всяка функция.

Когато едно място е забравено, данните и екранът се разминават: в cart има два продукта, а страницата казва нула. Грешка няма. Има страница, която показва нещо невярно.

Виж го

Виж разминаването

const cart = [];

function addByHand(product) {
  cart.push(product);
  cartList.append(cartItem(product));
  total.textContent = `Общо: ${money(sum())}`;
}

function render() {
  badge.textContent = `Кошница (${cart.length})`;
  cartList.replaceChildren(...cart.map(cartItem));
  total.textContent = `Общо: ${money(sum())}`;
}

function add(product) {
  cart.push(product);
  render();
}

Стъпка по стъпка, с думи

Вляво са данните: масивът cart. Вдясно са трите места на страницата, които го показват: броячът, редовете и сумата.
addByHand(хляб). Първо се сменят данните: масивът има един продукт.
После функцията пипа екрана на ръка: нов ред и нова сума. Всяко място е отделен ред код.
Ред за брояча никой не е написал. Данните казват 1, броячът казва 0. В конзолата няма грешка: страницата показва нещо невярно.
Още един продукт, пак на ръка. Разликата расте: 2 срещу 0.
Сега add(): тя само сменя данните. За миг целият екран е назад, защото още нищо не е нарисувано.
render() рисува трите места наново от cart: брояча, всеки ред и сумата. Не я интересува какво е имало на екрана преди.
Правилото: всяка промяна е първо данните, после render(). Екранът следва от данните и забравено място няма.

addByHand пипа две места от три. render пипа и трите, всеки път, от данните. Тя не пита какво е имало на екрана преди и затова не може да се обърка от него.

Идеята

Една render()

Правилото е кратко: функциите, които променят данните, не пипат екрана. Те сменят данните и викат render(). Само render() пише в страницата и пише всичко от данните:

function render() {
  badge.textContent = `Кошница (${cart.length})`;
  cartList.replaceChildren(...cart.map(cartItem));
  total.textContent = `Общо: ${money(sum())}`;
}

Така всяко място е описано веднъж. Новото място се добавя на един ред в render() и важи за add, за remove и за всяка бъдеща функция. Редовете се рисуват наново целите: replaceChildren маха старите и слага нови от cart.map(cartItem).

Пробвай

Една render()

add и remove пипат екрана на ръка и всяка забравя по едно място. Напиши render() така, че да рисува брояча, редовете и сумата от cart, а add и remove само да сменят cart и да викат render().

HTML, CSS, JS

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Кошница</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <header>
      <a href="/">Магазинът</a>
      <a href="/cart" id="badge">Кошница (0)</a>
    </header>
    <main>
      <h1>Хляб и мляко</h1>
      <ul id="products"></ul>
      <h2>Кошницата</h2>
      <ul id="cart"></ul>
      <p id="total">Общо: 0,00 €</p>
    </main>
  </body>
</html>

body { font-family: system-ui, sans-serif; margin: 0; }
header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; }
main { padding: 0 16px; }
li { margin: 4px 0; }
button { font: inherit; margin-left: 8px; }

const products = [
  { id: 1, name: 'Бял хляб', price: 1.2 },
  { id: 5, name: 'Прясно мляко', price: 1.6 },
  { id: 7, name: 'Сирене', price: 7.9 },
  { id: 10, name: 'Ябълки', price: 2.1 },
];
const cart = [];
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

const badge = document.querySelector('#badge');
const cartList = document.querySelector('#cart');
const total = document.querySelector('#total');
const sum = () => cart.reduce((s, p) => s + p.price, 0);

function productItem(product) {
  const li = document.createElement('li');
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = 'Добави';
  button.setAttribute('aria-label', `Добави ${product.name}`);
  button.addEventListener('click', () => add(product));
  li.append(`${product.name}, ${money(product.price)}`, button);
  return li;
}
document.querySelector('#products').replaceChildren(...products.map(productItem));

function cartItem(product, index) {
  const li = document.createElement('li');
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = 'Махни';
  button.setAttribute('aria-label', `Махни ${product.name}`);
  button.addEventListener('click', () => remove(index));
  li.append(product.name, button);
  return li;
}

function add(product) {
  cart.push(product);
  cartList.append(cartItem(product, cart.length - 1));
  total.textContent = `Общо: ${money(sum())}`;
}

function remove(index) {
  cart.splice(index, 1);
  cartList.children[index].remove();
  badge.textContent = `Кошница (${cart.length})`;
}

function render() {
  // Рисува брояча, редовете и сумата от cart.
}

const badge = document.querySelector('#badge');
const cartList = document.querySelector('#cart');
const total = document.querySelector('#total');
const sum = () => cart.reduce((s, p) => s + p.price, 0);

function cartItem(product, index) {
  const li = document.createElement('li');
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = 'Махни';
  button.setAttribute('aria-label', `Махни ${product.name}`);
  button.addEventListener('click', () => remove(index));
  li.append(product.name, button);
  return li;
}

function add(product) {
  cart.push(product);
  cartList.append(cartItem(product, cart.length - 1));
  total.textContent = `Общо: ${money(sum())}`;
}

function remove(index) {
  cart.splice(index, 1);
  cartList.children[index].remove();
  badge.textContent = `Кошница (${cart.length})`;
}

function render() {
  // Рисува брояча, редовете и сумата от cart.
}

Решение

index.html

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Кошница</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <header>
      <a href="/">Магазинът</a>
      <a href="/cart" id="badge">Кошница (0)</a>
    </header>
    <main>
      <h1>Хляб и мляко</h1>
      <ul id="products"></ul>
      <h2>Кошницата</h2>
      <ul id="cart"></ul>
      <p id="total">Общо: 0,00 €</p>
    </main>
  </body>
</html>

style.css

body { font-family: system-ui, sans-serif; margin: 0; }
header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; }
main { padding: 0 16px; }
li { margin: 4px 0; }
button { font: inherit; margin-left: 8px; }

script.js

const products = [
  { id: 1, name: 'Бял хляб', price: 1.2 },
  { id: 5, name: 'Прясно мляко', price: 1.6 },
  { id: 7, name: 'Сирене', price: 7.9 },
  { id: 10, name: 'Ябълки', price: 2.1 },
];
const cart = [];
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

const badge = document.querySelector('#badge');
const cartList = document.querySelector('#cart');
const total = document.querySelector('#total');
const sum = () => cart.reduce((s, p) => s + p.price, 0);

function productItem(product) {
  const li = document.createElement('li');
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = 'Добави';
  button.setAttribute('aria-label', `Добави ${product.name}`);
  button.addEventListener('click', () => add(product));
  li.append(`${product.name}, ${money(product.price)}`, button);
  return li;
}
document.querySelector('#products').replaceChildren(...products.map(productItem));

function cartItem(product, index) {
  const li = document.createElement('li');
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = 'Махни';
  button.setAttribute('aria-label', `Махни ${product.name}`);
  button.addEventListener('click', () => remove(index));
  li.append(product.name, button);
  return li;
}

function add(product) {
  cart.push(product);
  render();
}

function remove(index) {
  cart.splice(index, 1);
  render();
}

function render() {
  badge.textContent = `Кошница (${cart.length})`;
  cartList.replaceChildren(...cart.map(cartItem));
  total.textContent = `Общо: ${money(sum())}`;
}

Пробвай

Намери грешката

Броячът винаги е с един продукт назад: след първия клик казва 0, след втория 1.

Избери реда с грешката.

Идеята

Цената на „всичко наново“

render() не знае какво се е променило, затова сменя всичко. Обикновено това е невидимо. Понякога не е. В кошницата долу всеки ред има поле за брой и при всяка промяна на полето се вика render(). Купувачът иска 15 млека: трие 2, пише 1 и 5.

HTML, CSS, JS

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Кошница</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <main>
      <h1>Кошницата</h1>
      <ul id="cart"></ul>
      <p id="total"></p>
    </main>
  </body>
</html>

body { font-family: system-ui, sans-serif; margin: 0; }
header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; }
main { padding: 0 16px; }
li { margin: 4px 0; }
button { font: inherit; margin-left: 8px; }

const cart = [
  { name: 'Прясно мляко', price: 1.6, qty: 2 },
  { name: 'Бял хляб', price: 1.2, qty: 1 },
];
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

function cartItem(item) {
  const li = document.createElement('li');
  const label = document.createElement('label');
  const input = document.createElement('input');
  input.type = 'number';
  input.value = item.qty;
  input.addEventListener('input', () => {
    const qty = Number(input.value);
    if (qty > 0) {
      item.qty = qty;
      render();
    }
  });
  label.append(`${item.name} `, input);
  li.append(label);
  return li;
}

function render() {
  document.querySelector('#cart').replaceChildren(...cart.map(cartItem));
  const sum = cart.reduce((s, item) => s + item.price * item.qty, 0);
  document.querySelector('#total').textContent = `Общо: ${money(sum)}`;
}

render();

След цифрата 1 render() маха старото поле и слага ново със стойност 1. Фокусът беше на старото поле и вече го няма, затова 5 не стига никъде. Същото става с курсора в текстово поле, с позицията на превъртане в дълъг списък и с отворено падащо меню. А при 1000 реда браузърът строи 1000 нови елемента за всеки клик.

Двата пътя са лоши: на ръка забравяш места, а „всичко наново“ губи фокус и е бавно при голям списък. Решението е трето: пишеш една функция, която казва как изглежда екранът при тези данни, както render(). Някой друг сравнява новия резултат със стария и сменя в страницата само разликата: текста на брояча, един ред, нищо по полето. Това правят React и Vue, и това е следващият модул: компоненти.

По-точно, за любопитните

innerHTML вместо createElement. list.innerHTML = products.map((p) => `<li>${p.name}</li>`).join('') е по-кратко, но името на продукта влиза като HTML. Име с <img onerror=…> става код в страницата (XSS). textContent и createElement пазят текста като текст.

replaceChildren. Без аргументи изпразва елемента: list.replaceChildren(). Преди него се пишеше list.innerHTML = '' и после append.

Слушателите. Всеки нов бутон получава нов слушател в productItem. Старите бутони изчезват заедно със слушателите си. Друг път е делегирането: един слушател на <ul> и event.target.closest('li'), а в елемента пише кой продукт е (data-id).

hidden. element.hidden = true е като атрибута hidden в HTML: елементът не се показва. Ако CSS правило даде на елемента display, то печели над hidden, и елементът пак се вижда.

Да пазиш фокуса на ръка. Може да запомниш кое поле е било на фокус и къде е бил курсорът и след render() да ги върнеш. Работи, но е още едно място за забравяне. Библиотеките го правят вместо теб, защото не сменят полето изобщо.

Упражнение

Кошницата

Направи каталога и кошницата от данните. Всеки продукт е ред с бутон „Добави“ (името за екранния четец: „Добави Бял хляб“). Всеки ред в кошницата има бутон „Махни“ („Махни Бял хляб“). Броячът горе е „Кошница (2)“, сумата е „Общо: 10,00 €“, а „Кошницата е празна“ се вижда само когато кошницата е празна (свойството hidden).

HTML, CSS, JS

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Кошница</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <header>
      <a href="/">Магазинът</a>
      <a href="/cart" id="badge">Кошница (0)</a>
    </header>
    <main>
      <h1>Хляб и мляко</h1>
      <ul id="products"></ul>
      <h2>Кошницата</h2>
      <p id="empty">Кошницата е празна</p>
      <ul id="cart"></ul>
      <p id="total">Общо: 0,00 €</p>
    </main>
  </body>
</html>

body { font-family: system-ui, sans-serif; margin: 0; }
header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; }
main { padding: 0 16px; }
li { margin: 4px 0; }
button { font: inherit; margin-left: 8px; }

const products = [
  { id: 1, name: 'Бял хляб', price: 1.2 },
  { id: 5, name: 'Прясно мляко', price: 1.6 },
  { id: 7, name: 'Сирене', price: 7.9 },
  { id: 10, name: 'Ябълки', price: 2.1 },
];
const cart = [];
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

// Твоят код: каталогът, кошницата, броячът, сумата.

Решение

index.html

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Кошница</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <header>
      <a href="/">Магазинът</a>
      <a href="/cart" id="badge">Кошница (0)</a>
    </header>
    <main>
      <h1>Хляб и мляко</h1>
      <ul id="products"></ul>
      <h2>Кошницата</h2>
      <p id="empty">Кошницата е празна</p>
      <ul id="cart"></ul>
      <p id="total">Общо: 0,00 €</p>
    </main>
  </body>
</html>

style.css

body { font-family: system-ui, sans-serif; margin: 0; }
header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; }
main { padding: 0 16px; }
li { margin: 4px 0; }
button { font: inherit; margin-left: 8px; }

script.js

const products = [
  { id: 1, name: 'Бял хляб', price: 1.2 },
  { id: 5, name: 'Прясно мляко', price: 1.6 },
  { id: 7, name: 'Сирене', price: 7.9 },
  { id: 10, name: 'Ябълки', price: 2.1 },
];
const cart = [];
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

const badge = document.querySelector('#badge');
const cartList = document.querySelector('#cart');
const total = document.querySelector('#total');
const empty = document.querySelector('#empty');
const sum = () => cart.reduce((s, p) => s + p.price, 0);

function productItem(product) {
  const li = document.createElement('li');
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = 'Добави';
  button.setAttribute('aria-label', `Добави ${product.name}`);
  button.addEventListener('click', () => add(product));
  li.append(`${product.name}, ${money(product.price)}`, button);
  return li;
}

function cartItem(product, index) {
  const li = document.createElement('li');
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = 'Махни';
  button.setAttribute('aria-label', `Махни ${product.name}`);
  button.addEventListener('click', () => remove(index));
  li.append(product.name, button);
  return li;
}

function add(product) {
  cart.push(product);
  render();
}

function remove(index) {
  cart.splice(index, 1);
  render();
}

function render() {
  badge.textContent = `Кошница (${cart.length})`;
  empty.hidden = cart.length > 0;
  cartList.replaceChildren(...cart.map(cartItem));
  total.textContent = `Общо: ${money(sum())}`;
}

document.querySelector('#products').replaceChildren(...products.map(productItem));
render();

Тест

Провери се

1. Кошницата показва броя на продуктите на три места. При ръчното обновяване какво е най-честата грешка?Някое от местата е забравено и показва старото, без грешка в конзолатаБраузърът хвърля грешка, ако две места показват различноМасивът cart се променя сам, когато се промени екранът

2. Какво прави list.replaceChildren(...items)?Сменя самия list с itemsДобавя items след старите децаМаха всички деца на list и слага на тяхно място items

Без аргументи replaceChildren() изпразва елемента. С аргументи слага новите деца вместо старите. append би ги добавил след старите и редовете щяха да се трупат.

3. Къде в add трябва да е render()?Няма значениеПреди промяната на даннитеСлед промяната на данните

render() рисува това, което е в данните в момента. Извикана преди push, тя рисува старите данни и екранът остава с една стъпка назад.

4. Защо „рисувай всичко наново“ губи фокуса в поле от списъка?Полетата тип number не могат да имат фокусrender() маха старото поле от страницата и слага ново; фокусът е бил на старотоБраузърът маха фокуса при всяка промяна на textContent

Списък от данни

Бисквитки