如何根据按钮单击更新文本？答案

【问题标题】：How to update text based on button click?如何根据按钮单击更新文本？
【发布时间】：2022-01-25 16:54:21
【问题描述】：

<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%253ABest%2BBuy&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%253ABest%2BBuy&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>

【问题讨论】：

“具有相同的 elementID，正如您在我上面发布的代码中看到的那样” - ID 在文档中必须是唯一的。没有两个元素可以共享相同的 id。无论哪种方式，您发布的所有元素实际上都没有任何 id。另一件事，<button-disabled> 不是有效的 HTML 元素。 disabled 是按钮元素的属性（就像type、class 等）。您还需要向我们展示您尝试过的内容（您当前的 JS 代码），并更详细地解释您遇到的问题。我们很高兴为您解决具体问题，但我们不是来为您编写所有代码。
你的按钮在哪里？
@Leau 加号和减号按钮充当当前不执行任何操作的按钮。
div中有没有？
@Leau 是的！我已经编辑了帖子以添加更多代码和视觉输出表示。

标签： javascript html css

【解决方案1】：

您可以只使用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>

【讨论】：