クリックHTMLで値を変更する

bugfix> javascript > 投稿

ボタンをクリックして、テーブル内の製品ごとの数量値をインクリメントしようとしています。私は追加を得ました button テーブル内の各製品の最後にあるので、最初の製品の最初の数量値をインクリメントする場合は、最初の行の最初のボタンをクリックします。 2番目の製品の数量を増やしたい場合は、2行目のボタンをクリックするだけです。

これが table 私のHTMLファイルで（削除を無視してください button ）：

   <tbody>
      {%for stock in stocks%}
      <tr>
        <th scope="row">{{stock.stockId}}</th>
        <td>{{stock.name}}</td>
        <td>{{store.name}}</td>
        <td class="mystore-quantity">{{stock.quantity}}</td>
        <td>
          <button
            type="button"
            data-action="add"
            data-product="{{stock.id}}"
            class="btn btn-primary ml-2 mb-1 action-btn"
          >
            Add
          </button>
          <button
            type="button"
            data-product="{{stock.id}}"
            class="btn btn-danger ml-2 mb-1 action-btn"
            data-action="remove"
          >
            Sell
          </button>
        </td>
      </tr>
      {%endfor%}
    </tbody>
  </table>

これはJSファイルです（無視してください updateStock コール）：

const actionBtns = document.getElementsByClassName('action-btn');
const quantity = document.getElementsByClassName('mystore-quantity');
console.log(quantity[0])
for (let i = 0; i < actionBtns.length; i++)
{
    actionBtns[i].addEventListener('click', function(){
      
        const productId = this.dataset.product;
        const action = this.dataset.action;
        console.log('productId:', productId, 'Action:', action )
        if(user == 'AnonymousUser'){
            console.log('User not logged in')
        } else {
            console.log(quantity.textContent)
            updateStock(productId,action)
 
        }
    })
}

javascript

html

css

回答 1 件

  • 使用できます this クリックしたボタンをターゲットにして使用するキーワード closest() 親をターゲットにするtr。それからtrあなたがそれぞれを得ることができる要素td使用する要素 querySelector() 。

    デモ：

    const actionBtns = document.getElementsByClassName('action-btn');
//const quantity = document.getElementsByClassName('mystore-quantity');
//console.log(quantity[0])
for (let i = 0; i < actionBtns.length; i++){
  actionBtns[i].addEventListener('click', function(){
    const el = this.closest('tr').querySelector('.mystore-quantity');
    el.textContent = Number(el.textContent) + 1;
  });
}


    <table>
<tbody>
      <tr>
        <th scope="row">11</th>
        <td>abc</td>
        <td>xyz</td>
        <td class="mystore-quantity">1</td>
        <td>
          <button
            type="button"
            data-action="add"
            data-product="{{stock.id}}"
            class="btn btn-primary ml-2 mb-1 action-btn"
          >
            Add
          </button>
          <button
            type="button"
            data-product="{{stock.id}}"
            class="btn btn-danger ml-2 mb-1 action-btn"
            data-action="remove"
          >
            Sell
          </button>
        </td>
      </tr>
      <tr>
        <th scope="row">22</th>
        <td>mnl</td>
        <td>asd</td>
        <td class="mystore-quantity">2</td>
        <td>
          <button
            type="button"
            data-action="add"
            data-product="{{stock.id}}"
            class="btn btn-primary ml-2 mb-1 action-btn"
          >
            Add
          </button>
          <button
            type="button"
            data-product="{{stock.id}}"
            class="btn btn-danger ml-2 mb-1 action-btn"
            data-action="remove"
          >
            Sell
          </button>
        </td>
      </tr>
    </tbody>
  </table>

あなたの答え

関連記事