Check if Input Value has Decreased/Increased

Question

I have an Input which is of type number and want to check if its value has Decreased/Increased:

document.getElementById("myInput").addEventListener("change", function() {
    console.log(document.getElementById("myInput").value)

    // Check if Value has Increased/Decreased here
});

<input id="myInput" type = "number" value = "0">

Help would be Appreciated. Thanks!

What do you need help with? You now have the value, just find a way to save the previous value and compare it with the new value. A simple subtraction of both values should do the trick. — Hanlet Escaño, Aug 24 '21 at 16:17
This might help: https://stackoverflow.com/a/1910161/752527. — Hanlet Escaño, Aug 24 '21 at 16:22

score 3 · Accepted Answer · answered Aug 24 '21 at 16:24

Store the value and compare it

var elem = document.getElementById("myInput");
elem.dataset.lastValue = elem.value;
elem.addEventListener("change", function() {

  const direction = +elem.value > +elem.dataset.lastValue ? 'increased' : 'decreased';
  console.log(direction);
  elem.dataset.lastValue = elem.value;
});

<input id="myInput" type="number" value="0">

score 2 · Answer 2 · answered Aug 24 '21 at 16:24

Add some logic to handle the difference

const inputNode = document.getElementById("myInput");
let initialValue = 0;
inputNode.addEventListener("change", function () {
    const currentValue = Number(inputNode.value);
    if (currentValue > initialValue) {
        console.log('Increased by ', currentValue - initialValue)
    } else if (currentValue < initialValue) {
        console.log('Decreased by ', initialValue - currentValue)
    } else {
        console.log('No Change')
    }
    initialValue = currentValue;
});

<input id="myInput" type="number" value="0">

@CoderGuruXYZ Please approve this if this is what you are looking for. — Nitheesh, Aug 24 '21 at 16:41

score 2 · Answer 3 · edited Aug 24 '21 at 21:01

var a = document.getElementById('myInput').value;
document.getElementById("myInput").addEventListener("change", function() {
  console.log(document.getElementById("myInput").value)

  var b = document.getElementById('myInput').value;
  if (a > b) {
    //value decreased do what you want to do when value decreased

  } else if (a < b) {
    // value increased do what you want when value increased
  } else {
    //value is equal do what you want here
  }
  a = b;
});

Andy · Answer 4 · 2021-08-24T17:02:46.403

Return a closure from your listener that manages the current value of your input. That way you don't have to deal with global variables.

const input = document.querySelector('#myInput');

// Call `handleChange` that returns a new function to
// be used as the listener function
input.addEventListener('change', handleChange(), false)

function handleChange() {

  // Set the initial value
  let value = 0;
    
  // This is the function that your listener will be calling
  // but, because it "saves" variables from its local
  // environment, you can update `value` without any issues
  return function () {

    // Coerce the string to a number
    const inputValue = Number(input.value);

    // Check to see if it's decreased or increased
    // based on the current value
    if (inputValue < value) {
      console.log('Decreased');
    } else {
      console.log('Increased');
    }

    // Set the value to the new number
    value = inputValue;

  }

};

<input id="myInput" type = "number" value = "0">

score 1 · Answer 5 · answered Aug 24 '21 at 16:27

You could store the previous value in a variable, fetch the current one in your event handler, check if the new one is equal, smaller or greater than the stored one, and if new and stored one are not equal, update the stored one with the new value. Like this:

var oldValue = document.getElementById("myInput").value;

window.addEventListener("load", function() {
  document.getElementById("myInput").addEventListener("change", function() {
    var newValue = document.getElementById("myInput").value;
    if (oldValue == newValue) {
      console.log("Value was not changed, current:", newValue); /* this should normally never be the case */
    } else if (oldValue < newValue) {
      console.log("Value was increased from", oldValue, "to", newValue);
    } else if (oldValue > newValue) {
      console.log("Value was decreased from", oldValue, "to", newValue);
    }
    oldValue = newValue;
  });
});

<input id="myInput" type="number" value="0">

Check if Input Value has Decreased/Increased

5 Answers5