CODEWITHSUNDEEP
javascripthtmlfunctionif-statement
Black
Black

Reputation: 11

Restrict counter to be between 0 and 10

I would like to create 2 buttons one of which increases a number and the other decreases it, and I did do it. The problem is I don't want the numbers to go higher than 10 or lower than 0, I tried if else but didn't work. Can you, please, help me?

Here is the code:

document.addEventListener("DOMContentLoaded", function () {
    document.querySelector('#add').onclick = adding
    document.querySelector('#minus').onclick = subtracting
})

let counter = 0
function adding() {
    counter++
    document.querySelector('h1').innerHTML = counter

}


function subtracting() {
    counter--
    document.querySelector('h1').innerHTML = counter
    if( counter < 1){
        document.getElementById('minus').disabled = true
    } else{
        document.getElementById('minus').disabled = false
    }

}

Upvotes: 0

Views: 740

Answers (4)

mplungjan
mplungjan

Reputation: 178109

I recommend you delegate and use booleans in the way they are meant

I disabled the minus on load

window.addEventListener("load", function() {
  let counter = 0;
  const plus = document.getElementById('plus');
  const minus = document.getElementById('minus');
  const result = document.querySelector('h1');
  document.getElementById("container").addEventListener("click", function(e) {
    const tgt = e.target;
    counter += tgt.id === "plus" ? 1 : -1; // which one did we click - this can be expanded

    minus.disabled = counter < 1;
    plus.disabled = counter >= 10;

    result.innerHTML = counter;
  })
})
<div id="container">
  <button type="button" id="minus" disabled>-</button>
  <h1>0</h1>
  <button type="button" id="plus">+</button>
</div>

Upvotes: 1

Azad
Azad

Reputation: 5274

I added a working snippet for you, you can create a common function to set the value andenable or disable button based on counter values.

var counter = 0;

document.addEventListener("DOMContentLoaded", function() {

  //initial value
  setCounterValue(counter);

  //add function
  document.querySelector('#add').onclick = function() {
    setCounterValue(++counter); //increase the counter
  }

  //substract function
  document.querySelector('#minus').onclick = function() {
    setCounterValue(--counter); //decrease the counter
  }
});

//set the value and enable or disable buttons
function setCounterValue(value) {
  document.querySelector('h1').innerHTML = value;
  document.getElementById('minus').disabled = (value <= 0);
  document.getElementById('add').disabled = (value >= 10);
}
<p> Counter </p>
<h1 id="h1"> </h1>
<button id="add">Add</button> <button id="minus">Substract</button>

Upvotes: 0

riba.fish
riba.fish

Reputation: 1

Your code works fine. You only need to add another if conditional for adding and put it in the adding function.

if( counter >=10){
    document.getElementById('add').disabled = true
} else{
    document.getElementById('add').disabled = false
}

Upvotes: 0

xdhmoore
xdhmoore

Reputation: 9886

One way is

const MAX_COUNTER = 10;
const MIN_COUNTER = 0;
function adding() {
    if (counter < MAX_COUNTER) {
        counter++
        document.querySelector('h1').innerHTML = counter
    }
}

Another way is:

const MAX_COUNTER = 10;
const MIN_COUNTER = 0;
function adding() {
    counter = Math.min(counter + 1, MAX_COUNTER);
    document.querySelector('h1').innerHTML = counter
}

The subtracting is similar.

Upvotes: 0

Related Questions