Increase number with Javascript button

Question

I search to make a simple counter in javascript.

He has a button to increase, and another to decrease the number.

Like it’s a limited counter, they can increase more that 4/4.

let addSkill = document.querySelector('#addSkill');
let subSkill = document.querySelector('#subSkill');
let counter = document.querySelector('#counter');

addSkill.addEventListener('click', () => {
  if (counter.value = 4) {
    counter.value = 4;
  } else {
    counter.value = parseInt(counter.value) + 1;
  }
});

subSkill.addEventListener('click', () => {
  if (counter.value <= 0) {
    counter.value = 0;
  } else {
    counter.value = parseInt(counter.value) - 1;
  }
});

<span class="badge badge-pill badge-info">
  <span id="counter">0</span>
  <span>/4</span>
</span>

<div class="modal-footer border-top-0">
  <button type="radio" class="btn btn-warning" id="subSkill" data-dismiss="modal">Later</button>
  <button type="radio" class="btn btn-primary" id="addSkill" data-dismiss="modal">Now</button>
</div>

you left an equal in your condition. if (counter.value == 4) — AhmadKZX
– AhmadKZX, Commented Apr 22, 2021 at 21:01

charlietfl · Accepted Answer · 2021-04-22 21:08:40Z

A <span> doesn't have value, you need to read and set it's text. Also = is not a comparison operator.

You can simplify this down to:

let addSkill = document.querySelector('#addSkill');
let subSkill = document.querySelector('#subSkill');
let counter = document.querySelector('#counter');

addSkill.addEventListener('click', () => {
  let count = parseInt(counter.textContent)
  if (count < 4) {
    counter.textContent = ++count;
  }
});

subSkill.addEventListener('click', () => {
  let count = parseInt(counter.textContent)
  if (count > 0) {
    counter.textContent = --count;
  }
});

<span class="badge badge-pill badge-info"><span id="counter">0</span><span>/4</span></span>

<button type="radio" class="btn btn-warning" id="subSkill" data-dismiss="modal">Later</button>
<button type="radio" class="btn btn-primary" id="addSkill" data-dismiss="modal">Now</button>

Collectives™ on Stack Overflow

Increase number with Javascript button

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