Question 42397 in Html Question posted in
Some basic documentation can be found here.

Javascript counter both buttons are incrementing when clicked – Html

So I have a simple page with an even simpler javaScript counter. I would like the minus and plus signs within each of these three divs to increment and decrement when you click on them. Once they have been clicked they will update the content of the span with the count class.

However, both the minus and subtraction signs are incrementing when I click on them. I implemented a for loop that would check the value to prevent this but it didnt work. The counter is also giving me negative values what can I do to fix this?

const ctaLabels = document.querySelectorAll(".cta");
    Array.from(ctaLabels).forEach(function (label) {
      label.addEventListener("click", function () {
        const countSpan = label.parentNode.parentNode.querySelector(".count");
        if (label.textContent === "+") {
          countSpan.textContent = parseInt(countSpan.textContent) + 1;
        } else {
          countSpan.textContent = parseInt(countSpan.textContent) - 1;
        }
      });
    });
.cta {
color: white;
background: blue;
font: var(--font-variant-6);
letter-spacing: 0.5px;
transition: all 0.15s linear;
}

.cta:hover {
background: blue;
cursor: pointer;
transition: all 0.15s linear;
}
<section id="attendees">
        <div class="container">
          <h3 class="title">How many people should we be expecting?</h3>
          <div class="field-group --advanced">
            <div class="field --counter --required">
              <div class="label">Men:</div>
              <div class="input">
                <div>
                  <span class="count">0</span>
                </div>
              </div>
              <div class="actions">
                <label for="" class="cta">
                  <span>&minus;</span>
                </label>
                <label for="" class="cta">
                  <span>&plus;</span>
                </label>
              </div>
              
              <label for="" class="field__label">Men:</label>
              <input
                required
                id="men"
                name="men"
                type="number"
                placeholder="0"
                class="field__input"
              />
              
            </div>
            <div class="field --counter --required">
              <div class="label">Women:</div>
              <div class="input">
                <div>
                  <span class="count">0</span>
                </div>
              </div>
              <div class="actions">
                <label for="" class="cta">
                  <span>&minus;</span>
                </label>
                <label for="" class="cta">
                  <span>&plus;</span>
                </label>
              </div>
              
              <label for="" class="field__label">Women:</label>
              <input
                required
                id="women"
                name="women"
                type="number"
                placeholder="0"
                class="field__input"
              />
              
            </div>
            <div class="field --counter --required">
              <div class="label">Children:</div>
              <div class="input">
                <div>
                  <span class="count">0</span>
                </div>
              </div>
              <div class="actions">
                <label for="" class="cta">
                  <span>&minus;</span>
                </label>
                <label for="" class="cta">
                  <span>&plus;</span>
                </label>
              </div>
              
              <label for="" class="field__label">Children:</label>
              <input
                required
                id="children"
                name="children"
                type="number"
                placeholder="0"
                class="field__input"
              />
              
            </div>
          </div>
        </div>
      </section>
Tags:

3

Answers


  1. 0

    The problem is that you are checking label.textContent, but looking at the structure of your html, there is also a span nested under the label tag. So label.textContent will never be +/- and your if statment will always go on the else branch and decrement the number.

    You should change that if statement to check for something like this:

    label.querySelector('span').textContent

    Or you could remove the span from inside the label

    Login or Signup to reply.
  2. 0

    Use trim function to check whether to – or +, because text content contains space also

    const ctaLabels = document.querySelectorAll(".cta");
    Array.from(ctaLabels).forEach(function (label) {
      label.addEventListener("click", function () {
        const countSpan = label.parentNode.parentNode.querySelector(".count");
        if (label.textContent.trim() == "+") {
          countSpan.textContent = parseInt(countSpan.textContent) + 1;
        } else {
          countSpan.textContent = parseInt(countSpan.textContent) - 1;
        }
      });
    });
    .cta {
color: white;
background: blue;
font: var(--font-variant-6);
letter-spacing: 0.5px;
transition: all 0.15s linear;
margin:5px;
}

.cta:hover {
background: blue;
cursor: pointer;
transition: all 0.15s linear;
}
    <section id="attendees">
        <div class="container">
          <h3 class="title">How many people should we be expecting?</h3>
          <div class="field-group --advanced">
            <div class="field --counter --required">
              <div class="label">Men:</div>
              <div class="input">
                <div>
                  <span class="count">0</span>
                </div>
              </div>
              <div class="actions">
                <button class="cta">
                  <span>&minus;</span>
                </button>
                <button  class="cta">
                  &plus;
                </button>
              </div>
              
              <label for="" class="field__label">Men:</label>
              <input
                required
                id="men"
                name="men"
                type="number"
                placeholder="0"
                class="field__input"
              />
              
            </div>
            <div class="field --counter --required">
              <div class="label">Women:</div>
              <div class="input">
                <div>
                  <span class="count">0</span>
                </div>
              </div>
              <div class="actions">
                <label for="" class="cta">
                  <span>&minus;</span>
                </label>
                <label for="" class="cta">
                  <span>&plus;</span>
                </label>
              </div>
              
              <label for="" class="field__label">Women:</label>
              <input
                required
                id="women"
                name="women"
                type="number"
                placeholder="0"
                class="field__input"
              />
              
            </div>
            <div class="field --counter --required">
              <div class="label">Children:</div>
              <div class="input">
                <div>
                  <span class="count">0</span>
                </div>
              </div>
              <div class="actions">
                <label for="" class="cta">
                  <span>&minus;</span>
                </label>
                <label for="" class="cta">
                  <span>&plus;</span>
                </label>
              </div>
              
              <label for="" class="field__label">Children:</label>
              <input
                required
                id="children"
                name="children"
                type="number"
                placeholder="0"
                class="field__input"
              />
              
            </div>
          </div>
        </div>
      </section>
    Login or Signup to reply.
  3. 0

    you need to trim the textContent.

     if (label.textContent.trim() === "+") {...}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search