Question

我试图将一个对象的数量减少1，我在对象sell()中创建了一个函数，每次尝试按下该按钮时，我都没有收到任何答案，this.quantity并没有下降，我需要找出如何从对象外部调用该函数。

class item {
  constructor(name, price, quantity) {
    this.name = name;
    this.price = price;
    this.quantity = quantity;
  }
  //this is the function i am trying to activate
  sell(e) {
    e.preventDefault();
    return `${this.name} ${this.price} ${this.quantity-1}`

  }
  store(count) {
    return `${this.name} ${this.price} ${this.quantity+count}`
  }
}
const items = [
  new item('soap', 11, 3),
  new item('bread', 12, 2),
  new item('apples', 13, 5),
  new item('banana', 15, 7),
  new item('grappe', 16, 5),
  new item('water', 9, 7),
  new item('beer', 4, 9),
];
for (let i = 0; i < items.length; i++) {
  const list = document.querySelector('.elements');
  const newLi = document.createElement('tr');
  newLi.innerHTML += `
    <td>${items[i].name}</td><td>${items[i].price}</td><td>${items[i].quantity}</td><button class="buyer">Buy</buy>`;
  list.appendChild(newLi);
  let btnBuy = newLi.querySelector('.buyer');
  //this is the listener that should activate sell(),
  btnBuy.addEventListener('click', sell);
}

<table class="elements">
  <thead>
    <th>Name</th>
    <th>Price</th>
    <th>Quantity</th>
  </thead>
  <tbody></tbody>
</table>

感谢大家，希望您能提供帮助

Answer 1

代码中有几个问题：

1）btnBuy.addEventListener('click', sell);

未定义销售，我假设您需要items[i].sell

2）items[i].sell在addEventListener中将使用按钮上下文进行调用： sell(e) { //... here this === button } 有很多解决方法，我最喜欢的是使用箭头功能：

sell = (e) => {
  e.preventDefault();
  return `${this.name} ${this.price} ${this.quantity-1}`
}

3）您无需更改Sell函数中的任何内容即可显示数据，只需返回字符串即可，没有人使用此数据。

在这里，我认为您想要达到的目标：

<html>
<body>

<table class="elements">
  <thead>
  <th>Name</th>
  <th>Price</th>
  <th>Quantity</th>
  </thead>
  <tbody class="elements-body"></tbody>
</table>

<script>
  class item {
    constructor(name, price, quantity) {
      this.name = name;
      this.price = price;
      this.quantity = quantity;
    }
    //this is the function i am trying to activate
    sell = () => {
      if (this.quantity > 0) {
        this.quantity--;
      }
      return `${this.name} ${this.price} ${this.quantity-1}`; //actually now you dont need this
    };

    store = (count) => {
      return `${this.name} ${this.price} ${this.quantity+count}`;
    }
  }
  const items = [
    new item('soap', 11, 3),
    new item('bread', 12, 2),
    new item('apples', 13, 5),
    new item('banana', 15, 7),
    new item('grappe', 16, 5),
    new item('water', 9, 7),
    new item('beer', 4, 9),
  ];

  const renderItems = (items) => {

    const list = document.querySelector('.elements-body');
    list.innerHTML = '';

    for (let i = 0; i < items.length; i++) {
      const newLi = document.createElement('tr');
      newLi.innerHTML += `<td>${items[i].name}</td><td>${items[i].price}</td><td>${items[i].quantity}</td><button class="buyer">Buy</buy>`;
      list.appendChild(newLi);
      let btnBuy = newLi.querySelector('.buyer');
      //this is the listener that should activate sell(),
      btnBuy.addEventListener('click', (e) => {
        e.preventDefault();
        items[i].sell();
        renderItems(items);
      });
    }
  };

  renderItems(items);

</script>

</body>
</html>

从事件侦听器创建的对象的调用方法

1 个答案: