如何根據按鈕點擊更新文本？

<button type="button" class="btn btn-secondary" data-quantity="minus">-</button>
<button-disabled type="button" class="btn btn-secondary">12</button-disabled>
<button type="button" class="btn btn-secondary" data-quantity="plus""> </button>

我在這里學習 javascript 有困難，不知道從哪里開始。我基本上想要加號和減號按鈕來更新計數，例如我在這里有一個占位符“12”。

我正在考慮使用 javascript 腳本來運行按鈕 或 - 單擊，這將根據 ElementID 更新計數，但是我有 100 個這些產品，它們具有 和 - 計數，并且具有相同的 elementID，您可以請參閱我上面發布的代碼。正如您所看到的，我實際上是在使用一個禁用按鈕，以便它可以適合我正在進行的正確樣式。

關于我如何解決這個問題的任何想法？

編輯：下面發布了更多代碼

<div id="Thursday">
      <!-- break from shift selector and time in shift selector -->
      <br>
      <p style="text-align: center">2:00 - 6:00PM | 240 Minutes<br><em>tip: tap the title of product to view best buy stock!</em></p>
      <h3 style="padding-top: 4%; padding-bottom: 2%; text-align: center;">Printers Section</h3>
      <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups" style="text-align: right; margin-bottom: 7px;">
        <div class="btn-group me-2" role="group" aria-label="First group">
          <button type="button" class="btn btn-secondary" onclick="window.location.href='https://www.bestbuy.ca/en-ca/search?path=soldandshippedby0enrchstring%3ABest+Buy&search=officejet pro';" target="_blank">Demo - OfficeJet Pro</button>
          <button type="button" class="btn btn-secondary" data-quantity="minus">-</button>
          <button-disabled type="button" id="T-ojpro-count" class="btn btn-secondary">12</button-disabled>
          <button type="button" class="btn btn-secondary" data-quantity="plus""> </button>
                      </div>
                    </div>
       <div class=" btn-toolbar" role="toolbar" aria-label="Toolbar with button groups" style="text-align: center; margin-bottom: 23px;">
            <div class="btn-group me-2" role="group" aria-label="First group">
              <button type="button" class="btn btn-secondary" onclick="window.location.href='https://www.bestbuy.ca/en-ca/search?path=soldandshippedby0enrchstring%3ABest+Buy&search=officejet pro';">Sale - OfficeJet Pro</button-disabled>
                <button type="button" class="btn btn-secondary">-</button>
                <button-disabled type="button" class="btn btn-secondary">0</button-disabled>
                <button type="button" class="btn btn-secondary"> </button>
            </div>
        </div>

uj5u.com熱心網友回復：

您可以僅使用onclick事件偵聽器來檢測按鈕何時被單擊，<Element>.nextSibling并使用<Element>.previousSibling屬性來增加或減少計數器，具體取決于它是單擊按鈕的下一個還是上一個。

document.onclick = e => {
  if(e.target.className.startsWith('btn') && e.target.dataset.quantity) {
    if(e.target.dataset.quantity === 'minus') {
      e.target.nextSibling.nextSibling.textContent = parseInt(e.target.nextSibling.nextSibling.textContent) - 1;
    } else if(e.target.dataset.quantity === 'plus') {
      e.target.previousSibling.previousSibling.textContent = parseInt(e.target.previousSibling.previousSibling.textContent)   1;
    }
  }
}

<div>
  <div>
    <button type="button" class="btn btn-secondary" data-quantity="minus">-</button>
    <button disabled type="button" class="btn btn-secondary">12</button>
    <button type="button" class="btn btn-secondary" data-quantity="plus"> </button>
  </div>
  <div>
    <button type="button" class="btn btn-secondary" data-quantity="minus">-</button>
    <button disabled type="button" class="btn btn-secondary">12</button>
    <button type="button" class="btn btn-secondary" data-quantity="plus"> </button>
  </div>
  <div>
    <button type="button" class="btn btn-secondary" data-quantity="minus">-</button>
    <button disabled type="button" class="btn btn-secondary">12</button>
    <button type="button" class="btn btn-secondary" data-quantity="plus"> </button>
  </div>
</div>

標籤：javascript html css

上一篇：TypeError：undefined不是ReactJS中的物件（評估“event.preventDefault”）

下一篇：如何在這個函式中輸入值？