CODEWITHSUNDEEP
javascriptcounter
Kelijsto
Kelijsto

Reputation: 73

Increase number with Javascript button

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>

Upvotes: 0

Views: 57

Answers (1)

charlietfl
charlietfl

Reputation: 171679

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>

Upvotes: 2

Related Questions