How to update text based on button click?

Question

<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>

I am having trouble learning javascript here and have no idea where to start. I basically want the plus and minus buttons to update the count, and I have a placeholder "12" here for example.

I was thinking of using a javascript script to run upon button + or - click that would update the count based on ElementID, but I have like 100 of these products that have + and - counts to them, with the same elementID, as you can see in the code I posted above. As you can see i'm essentially using a disabled button, so that it can fit with the proper styling I have going on.

Any ideas on how I could go about this?

Edit: more code posted below

<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>

"with the same elementID, as you can see in the code I posted above" - Id's must be unique within a document. No two elements can share the same id. Either way, none of the elements you've posted actually has any id. Another thing, <button-disabled> isn't a valid HTML element. disabled is an attribute on a button element (just like type, class and such). You also need to show us what you've tried (your current JS code) and explain in more detail where you're stuck. We're glad to help you with specific issues, but we're not here to write all the code for you. — M. Eriksson
– M. Eriksson, Commented Dec 25, 2021 at 23:31
@Leau The plus and minus buttons act as buttons that currently do not do anything. — Usama Saleem
– Usama Saleem, Commented Dec 25, 2021 at 23:42
@Leau Yes! I have edited the post to add more code and the visual output representation. — Usama Saleem
– Usama Saleem, Commented Dec 25, 2021 at 23:47

Leau · Accepted Answer · 2021-12-25 23:56:53Z

You can just use an onclick event listener to detect when a button is clicked with <Element>.nextSibling and <Element>.previousSibling properties to increment or decrement the counter depending on whether it's next or previous the clicked button.

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>

Collectives™ on Stack Overflow

How to update text based on button click?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related