So, how do you check if a value has changed in Javascript by user input? For example, if they clicked a button that would change a variable's value by 1, how do you detect that?

Currently, I have a variable:

var value = 1;
var lastValue = value;

and I want to detect when that would change, say, if the user inputs a new value.

I've tried doing this:

function manageGame() {
    checkValues();
    manageGame();
}

function checkValues() {
    if (value !== lastValue) {
        alert("OOOOOH NO");
        lastValue = value;
    }
}

manageGame()

document.getElementById("btn").onclick = function() {
    value += 1;
}

and then for the HTML:

<button id='btn'>Click me to increase value</button>

But then I couldn't figure out how to change the values, because if I put anything after the manageGame() function call, it wouldn't run. And if I put anything before it, then they would only run once.

So, how do you check if a value has changed in Javascript by user input? For example, if they clicked a button that would change a variable's value by 1, how do you detect that?

Currently, I have a variable:

var value = 1;
var lastValue = value;

and I want to detect when that would change, say, if the user inputs a new value.

I've tried doing this:

function manageGame() {
    checkValues();
    manageGame();
}

function checkValues() {
    if (value !== lastValue) {
        alert("OOOOOH NO");
        lastValue = value;
    }
}

manageGame()

document.getElementById("btn").onclick = function() {
    value += 1;
}

and then for the HTML:

<button id='btn'>Click me to increase value</button>

But then I couldn't figure out how to change the values, because if I put anything after the manageGame() function call, it wouldn't run. And if I put anything before it, then they would only run once.

• javascript
• variables

Share Improve this question Follow edited Feb 27, 2021 at 23:03 Guest asked Feb 27, 2021 at 22:10 GuestGuest 1111 gold badge11 silver badge55 bronze badges 4

• if you have a dedicated input, you could use onChange and then handle onchange change in a function – DevMoutarde Commented Feb 27, 2021 at 22:14
• 2 If it is your code that changes the value, then you can also add functionality to inform the rest of your code that there was a change, either through state, or a notification (callback). – trincot Commented Feb 27, 2021 at 22:18
• @trincot terrific! My code changes the value, I'm pretty sure. – Guest Commented Feb 27, 2021 at 22:21
• 1 So add the code in your question to show where your value is changed. – trincot Commented Feb 27, 2021 at 22:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 0

Whenever the value changes, you could set a flag (set a boolean variable to true):

var valueHasChanged = false;
var value = 1;

function checkValues() {
    if (valueHasChanged) {
        alert("OOOOOH NO");
        valueHasChanged = false;
    }
}

document.getElementById("btn").onclick = function() {
    value += 1;
    valueHasChanged = true;
}

When you call the manage game function from itself you are creating an infinite loop.

While this infinite loop is running, JS cannot handle event listeners. That is why nothing after your manageGame call is running.

If you want to have add a function that constantly checks the status of your variable, I suggest using an interval function to repeatedly call your checkValues function.

The format for set interval is :

setInterval( yourFunction() , interval time (in ms))

So for you it would look something like :

setInterval(checkValues(), 100);

This would call your checkValues function every 100 ms (10 times per second).

You could solve your issue by creating an object, which allows the registration of event handlers. Then when the value is changed it calls all registered handlers.

const value = (function () {
  let value = 1;
  const handlers = [];
  return {
    get current() { return value },
    set current(newValue) {
      if (newValue === value) return;
      const oldValue = value;
      value = newValue;
      handlers.forEach(handler => handler(newValue, oldValue));
    },
    addChangeListener(handler) {
      handlers.push(handler);
    },
  };
})();

const val = document.getElementById("val");
val.textContent = value.current
value.addChangeListener(function (newValue, oldValue) {
  console.log("OOOOOH NO");
  console.log(`value.current changed from ${oldValue} to ${newValue}`);
  val.textContent = value.current;
});

document.getElementById("btn").onclick = function() {
  value.current += 1;
}

<button id='btn'>Click me to increase value</button>
<span id="val"></span>