如何实现购物车类方法通过HTML按钮onclick事件调用？

你的代码问题在于：按钮onclick中的this指向的是按钮元素本身，而非Cart类的实例，所以无法找到doSomething方法。下面提供几种适配购物车场景的可行实现方式：

方法1：事件委托（推荐，适配多商品动态场景） #

通过将点击事件绑定到购物车容器，利用事件冒泡统一处理所有按钮的点击，适合购物车中商品动态增减的场景，只需绑定一次事件：

const myElm = document.getElementById("myElm");

class Cart {
  constructor(myElm) {
    this.container = myElm;
    // 初始化渲染购物车结构
    this.renderCart();
    // 绑定事件委托到容器
    this.container.addEventListener('click', this.handleButtonClick.bind(this));
  }

  // 示例：渲染一个带增减按钮的商品项
 Des More SPDX Dems� zad dispersed守 addition ShortV禁Slot！哦不对，重新写：
  // 示例：渲染一个带增减按钮的商品项
  renderCart() {
    this.container.innerHTML = `
      <div class="cart-item" data-id="1">
        <span>商品A</span>
        <button type="button" data-action="decrease">-</button>
        <span class="quantity">1</span>
        <button type="button" data-action="increase">+</button>
      </div>
    `;
  }

  // 统一处理所有按钮点击
  handleButtonClick(e) {
    const target = e.target;
    const action = target.dataset.action;
    const itemEl = target.closest('.cart-item');
    const productId = itemEl.dataset.id;

    if (!action || !productId) return;

    switch(action) {
      case 'increase':
        this.updateQuantity(itemEl, 1);
        break;
      case 'decrease':
        this.updateQuantity(itemEl, -1);
        break;
    }
  }

  // 购物车核心逻辑：更新商品数量
  updateQuantity(itemEl, change) {
    const quantityEl = itemEl.querySelector('.quantity');
    let currentQty = parseInt(quantityEl.textContent);
    currentQty = Math.max(1, currentQty + change); // 数量不低于1
    quantityEl.textContent = currentQty;
    console.log(`商品${itemEl.dataset.id}数量更新为：${currentQty}`);
  }
}

const myCart = new Cart(myElm);

方法2：手动创建元素并绑定事件 #

避免使用innerHTML，通过document.createElement创建元素，直接绑定事件监听，确保this指向Cart实例：

const myElm = document.getElementById("myElm");

class Cart {
  constructor(myElm) {
    this.container = myElm;
    this.addCartItem('商品B', 1);
  }

  // 创建单个商品项及增减按钮
  addCartItem(productName, initialQty) {
    const itemEl = document.createElement('div');
    itemEl.className = 'cart-item';

    const nameSpan = document.createElement('span');
    nameSpan.textContent = productName;

    const decreaseBtn = document.createElement('button');
    decreaseBtn.type = 'button';
    decreaseBtn.textContent = '-';
    // 箭头函数确保this指向Cart实例
    decreaseBtn.addEventListener('click', () => this.updateItemQuantity(itemEl, -1));

    const quantitySpan = document.createElement('span');
    quantitySpan.className = 'quantity';
    quantitySpan.textContent = initialQty;

    const increaseBtn = document.createElement('button');
    increaseBtn.type = 'button';
    increaseBtn.textContent = '+';
    increaseBtn.addEventListener('click', () => this.updateItemQuantity(itemEl, 1));

    // 组装元素
    itemEl.append(nameSpan, decreaseBtn, quantitySpan, increaseBtn);
    this.container.appendChild(itemEl);
  }

  updateItemQuantity(itemEl, change) {
    const quantityEl = itemEl.querySelector('.quantity');
    let currentQty = parseInt(quantityEl.textContent);
    currentQty = Math.max(1, currentQty + change);
    quantityEl.textContent = currentQty;
    console.log(`商品数量更新为：${currentQty}`);
  }
}

const myCart = new Cart(myElm);

方法3：模板字符串中引用实例（简单场景可用） #

将Cart实例保存为变量，在模板字符串的onclick中直接调用实例方法，注意避免全局变量冲突：

const myElm = document.getElementById("myElm");

class Cart {
  constructor(myElm) {
    this.container = myElm;
    // 保存实例引用，供模板调用
    const cartInstance = this;
    this.container.innerHTML = `
      <button type="button以此/Xon提供z>3禁运增YNnor！，�？哦不对，重新写：
      <button type="button" onclick="cartInstance.doSomething('hello world')">CLICK ME</button>
    `;
  }

  doSomething(x) {
    console.log(x);
  }
}

const myCart = new Cart(myElm);

关键说明 #

• 事件委托是购物车场景的最优选择：无需为每个新添加的商品重复绑定事件，性能更优，逻辑更集中。
• 避免直接在innerHTML的onclick中使用this：因为此处this指向DOM元素，而非类实例。

内容的提问来源于stack exchange，提问作者Oscar