Я создаю html-карту и кнопки из массива. Я хочу вызвать функцию с данными из foreach. Но я не могу понять это.
Я получаю проблему в методе renderProducts().
/// <reference path = "coin.ts" />
/// <reference path = "product.ts" />
/// <reference path = "productFactory.ts" />
enum VendingMachineSize {
small = 6,
medium = 9,
large = 1,
}
class Cell {
constructor(public product: CocoCola) {}
stock: 3;
sold: false;
}
class VendingMachine {
private totalMoney = 0;
private totalMoneyText = <HTMLSpanElement>document.getElementById("total-money");
private containerElement = <HTMLDivElement>document.querySelector(".machine");
allCoins: number[] = [0];
cells = [];
selectedCells = [new Cell(new CocoCola())];
set size(givenSize: VendingMachineSize) {
this.cells = [];
for (let index = 0; index < givenSize; index++) {
let product = ProductFactory.GetProduct();
this.cells.push(new Cell(product));
}
this.renderProducts();
}
constructor() {
console.info("I am vending machine!");
}
select(cell: Cell) {
cell.sold = false;
this.selectedCells.push(cell);
console.info(this.selectedCells);
}
acceptCoin(coin: Quarter): void {
this.totalMoney += coin.Value;
this.totalMoneyText.textContent = this.totalMoney.toString();
}
renderProducts() {
this.cells.forEach((product) => {
let html = `<div class = "card " style = "width: 18rem">
<img src=${product.product.category.getImageUrl()} class = "" alt = "..." />
<div class = "card-body">
<h5 class = "card-title">${product.product.name}</h5>
<p class = "card-text">
${product.product.description}
</p>
<button type = "button" class = "btn btn-outline-dark w-100 select-btn" onclick = "machine.select(${product})">? ${
product.product.price
}</button>
</div>
</div>`;
this.containerElement.insertAdjacentHTML("beforeend", html);
});
}
}
<button type = "button" class = "btn btn-outline-dark w-100 select-btn" onclick = "machine.select(${product})">? ${product.product.price}</button>
Я хочу, чтобы у этой кнопки был прослушиватель кликов с аргументом продукта
Когда я делаю это так, это дает мне эту ошибку: Uncaught SyntaxError: Неожиданный идентификатор (в (индекс): 33:63)
Здесь я создал экземпляр класса
/// <reference path = "vendingMachine.ts" />
const machine = new VendingMachine();
machine.size = VendingMachineSize.medium;
Вы не можете сделать это так, потому что вы используете интерполяцию строк.
Когда вы печатаете
`some text ${product}`
и product
является объектом в вашей области, javascript вызовет метод toString
для объекта и вернет [Object object]
<- вот ошибка, которую вы получили: **Uncaught SyntaxError: Unexpected identifier**
Когда вы пытаетесь интерполировать обработчик onclick, вы должны создать корректный код JS, например:
<div onclick = "machine.select(${number})"></div>,
<div onclick = "machine.select('${string}')"></div>,
<div onclick = "machine.select(JSON.parse('${JSON.encode(product)}'))"></div>
Я рекомендую установить прослушиватель после создания html; Например:
<button type = "button" data-product = "${product.product.name}" class = "btn btn-outline-dark w-100 select-btn">? ${product.product.price}</button>
...
this.containerElement.insertAdjacentHTML("beforeend", html);
this.containerElement.querySelectorAll('button').forEach(item => {
item.addEventListener('click', () => {
this.select(item.dataset.product)
})
})