Increment and decrement counter JS

user_11124281 0
Viewed 955

I need increment and decrement a counter when click the buttons.

const checkbox = document.getElementById('cb_enabled'),
  increment = document.getElementById('btn_increment'),
  decrement = document.getElementById('btn_decrement'),
  counter = document.getElementById('js-counter').innerHTML;

checkbox.addEventListener("change", function(checkbox) {

  if (this.checked === false) {
    increment.disabled = true;
    decrement.disabled = true;
  } else {
    increment.disabled = false;
    decrement.disabled = false;
  }
});

increment.onclick = () => {
  counter.innerHTML = 1;
}

decrement.onclick = () => {
  counter.innerHTML = 0;
}
<h1 id="js-counter"> 0 </h1>
<button id="btn_decrement" type="button"> Decrement </button>
<button id="btn_increment" type="button"> Increment </button>

<label for="cb_enabled">
  Enable/Disable counter
  <input id="cb_enabled" type="checkbox" checked />
</label>

But I don't know how to increase and decrease the number (in this case, the element into js-counter). Any ideas?

javascript
4 Answers

counter should just be the element, not its innerHTML.

To increment it, get its contents, parse it to a number, add or subtract 1, then write that back to the element.

const checkbox = document.getElementById('cb_enabled'),
  increment = document.getElementById('btn_increment'),
  decrement = document.getElementById('btn_decrement'),
  counter = document.getElementById('js-counter');

checkbox.addEventListener("change", function(checkbox) {
  if (this.checked === false) {
    increment.disabled = true;
    decrement.disabled = true;
  } else {
    increment.disabled = false;
    decrement.disabled = false;
  }
});

function add_to_counter(increment) {
  let cur_count = parseInt(counter.innerText);
  let new_count = cur_count + increment;
  counter.innerText = new_count;
}
increment.onclick = () => {
  add_to_counter(1);
}

decrement.onclick = () => {
  add_to_counter(-1);
}
<h1 id="js-counter"> 0 </h1>
<button id="btn_decrement" type="button"> Decrement </button>
<button id="btn_increment" type="button"> Increment </button>

<label for="cb_enabled">
  Enable/Disable counter
  <input id="cb_enabled" type="checkbox" checked />
</label>

user_14918950

Keep reference to the counter element and not to it's innerHTML property and also don't forget to parseInt the string value before incrementing.

const checkbox = document.getElementById('cb_enabled'),
  increment = document.getElementById('btn_increment'),
  decrement = document.getElementById('btn_decrement'),
  counter = document.getElementById('js-counter');

checkbox.addEventListener("change", function(checkbox) {

  if (this.checked === false) {
    increment.disabled = true;
    decrement.disabled = true;
  } else {
    increment.disabled = false;
    decrement.disabled = false;
  }
});

increment.onclick = () => {
  const num = parseInt(counter.innerHTML);
  counter.innerHTML = num + 1;
}

decrement.onclick = () => {
   const num = parseInt(counter.innerHTML);
  counter.innerHTML = num - 1;
}
<h1 id="js-counter"> 0 </h1>
<button id="btn_decrement" type="button"> Decrement </button>
<button id="btn_increment" type="button"> Increment </button>

<label for="cb_enabled">
  Enable/Disable counter
  <input id="cb_enabled" type="checkbox" checked />
</label>

user_74942180

The issue was with the counter initialization counter = document.getElementById("js-counter").innerHTML You are getting innerHTML reference while initialisation and also during assigning.

counter.innerHTML = 1;

const checkbox = document.getElementById('cb_enabled'),
  increment = document.getElementById('btn_increment'),
  decrement = document.getElementById('btn_decrement');
  counter = document.getElementById("js_counter");

checkbox.addEventListener("change", function(checkbox) {

  if (this.checked === false) {
    increment.disabled = true;
    decrement.disabled = true;
  } else {
    increment.disabled = false;
    decrement.disabled = false;
  }
});

increment.onclick = () => {
  counter.innerHTML = 1;
}

decrement.onclick = () => {
  counter.innerHTML = 0;
}
<h1 id="js_counter"> 0 </h1>
<button id="btn_decrement" type="button"> Decrement </button>
<button id="btn_increment" type="button"> Increment </button>

<label for="cb_enabled">
  Enable/Disable counter
  <input id="cb_enabled" type="checkbox" checked />
</label>

user_51311390

I can give you functionality for increment and decrement counter from my ReactNative.Below There is Functionality for your HTML Project

const [num, setNum] = useState(0);

  function incre() {
    setNum(num + 1);
  }
  function decre() {
    if (num > 0) {
      setNum(num - 1);
    } else {
      Alert.alert('zero is the limit');
    }

Now Just Display the counter in the Div or View of the Application and Call the function on CLick or Press the Button.

     <View style={{width: '100%'}}>
            <Text>
              Count
            </Text>
            <Text>
              {num}
            </Text>
<TouchableOpacity
            style={{alignSelf: 'center'}}
            onPress={() => {
              incre();
              decre();
            }}>
</TouchableOpacity>

if it is a button in HTML

<button id="btn_decrement" type="button"  onclick={() => {
              incre();
             
            }}>> Decrement </button>
<button id="btn_increment" type="button" onclick={() => {
              decre();
             
            }}>> Decrement </button>

Functionality for your HTML;

 function incre() {
     
          var num=num+1;
      
          }

    function decre() {
            
              var num=num-1;
              
              }
user_105996660
Related