检查输入值是否减少/增加答案

【问题标题】：Check if Input Value has Decreased/Increased检查输入值是否减少/增加
【发布时间】：2021-10-24 20:59:01
【问题描述】：

我有一个类型为 number 的 Input，并想检查它的值是否已减少/增加：

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

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

&lt;input id="myInput" type = "number" value = "0"&gt;

我们将不胜感激。谢谢！

【问题讨论】：

您需要什么帮助？您现在有了值，只需找到一种方法来保存以前的值并将其与新值进行比较。两个值的简单减法应该可以解决问题。
但是在比较之前值会发生变化
所以将原始变量存储在某处并进行比较
这可能会有所帮助：stackoverflow.com/a/1910161/752527.

标签： javascript

【解决方案1】：

存储值并进行比较

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;
});

&lt;input id="myInput" type="number" value="0"&gt;

【讨论】：

谢谢！这有帮助:)

【解决方案2】：

添加一些逻辑来处理差异

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;
});

&lt;input id="myInput" type="number" value="0"&gt;

【讨论】：

谢谢！这有帮助:)
@CoderGuruXYZ 如果这是您要找的，请批准。

【解决方案3】：

您可以将前一个值存储在一个变量中，在事件处理程序中获取当前值，检查新值是否等于、小于或大于存储的值，如果新值和存储的值不相等，则更新用新值存储一个。像这样：

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;
  });
});

&lt;input id="myInput" type="number" value="0"&gt;

【讨论】：

谢谢！这有帮助:)

【解决方案4】：

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;
});

【讨论】：

谢谢！这有帮助:)

【解决方案5】：

从管理当前输入值的侦听器返回 a closure。这样您就不必处理全局变量。

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;

  }

};

&lt;input id="myInput" type = "number" value = "0"&gt;

【讨论】：