[[oktatas:web:javascript|< JavaScript]] ====== Termékek inline rugalmasan ====== * **Szerző:** Sallai András * Copyright (c) 2024, Sallai András * Szerkesztve: 2024 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== Bevezetés ===== Egy példa helye: * https://github.com/oktat/termekek.git ===== HTML ===== Sinto Project

Termékek

===== JavaScript ===== const doc = { content : document.querySelector('#content'), pieceOfProducts: document.querySelector('#pieceOfProducts') } const state = { products: [], cart: [] } state.products = [ {id: 1, name: "cpu", price: 0.12 }, {id: 2, name: "egér", price: 0.12 }, {id: 3, name: "billentyűzet", price: 0.02 }, {id: 4, name: "HDD", price: 0.11 }, {id: 5, name: "sDD", price: 0.13 }, {id: 6, name: "CD-ROM", price: 0.12 }, {id: 7, name: "monitor", price: 0.12 }, {id: 8, name: "pendrive", price: 0.12 }, {id: 9, name: "elem", price: 0.12 }, {id: 10, name: "tároló", price: 0.12 }, {id: 11, name: "cpu", price: 0.12 }, ] var cards = '' state.products.forEach( prod => { const card = `
...
${prod.name}

${prod.price} (LIT)

` cards += card }) doc.content.innerHTML = cards function addToCart(source) { console.log(source.dataset.id) console.log(source.parentNode.parentNode.children[1].children[0].value) const item = { productId: source.dataset.id, piece: source.parentNode.parentNode.children[1].children[0].value } state.cart.push(item) } function refreshPage() { location.reload() }