Как вызвать функцию с данными из метода foreach в строке HTML?

Я создаю 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;

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
38
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не можете сделать это так, потому что вы используете интерполяцию строк.

Когда вы печатаете

`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)
  })
})

Другие вопросы по теме