adding new value to variable

Question

I have a question I have simple JavaScript that do some basic stuff to a number from input. I have a question how can I make variable that will always track the new input value for example if I enter 123 and click on some of the following buttons I get the result, but if I now enter new number for example 54321 and click again on some of the buttons I start from the previous value. How can I make my variable change every time a new value is entered or changed ? Here is my code:

var number = document.getElementById("number");
var numberValue = number.value;
console.log(numberValue);

function plus() {
  number.value = ++numberValue;
}

function minus() {
  number.value = --numberValue;
}

function flip() {
  var temp = numberValue;
  var cifra, prevrten = 0;
  while (temp > 0) {
    cifra = temp % 10;
    prevrten = (prevrten * 10) + cifra;
    temp = temp / 10 | 0;
  }
  number.value = prevrten;
}
window.onload = function() {
  number.value = "";
}

<div>
  <input type="text" id="number" id="output" onload="restart();">
  <input type="button" value="<" onclick="minus();">
  <input type="button" value=">" onclick="plus();">
  <input type="button" value="FLIP" onclick="flip();">
  <input type="button" value="STORE" onclick="store();">
  <input type="button" value="CHECK" onclick="check();">
</div>

Answer 1

I suggest you use a type="number" and case the value to number - her I use the unary plus to do so

You will need to read the value in all functions

let numberValue = 0;

function store() {}
function check() {}

function plus() {
  numberValue = +number.value;
  number.value = ++numberValue;
}

function minus() {
  numberValue = +number.value;
  number.value = --numberValue;
}

function flip() {
  let numberValue = +number.value;
  var cifra, prevrten = 0;
  while (numberValue > 0) {
    cifra = numberValue % 10;
    prevrten = (prevrten * 10) + cifra;
    numberValue = numberValue / 10 | 0;
  }
  number.value = prevrten;

}

window.addEventListener("load", function() {
  let number = document.getElementById("number");
  number.value = 0;
})

<div>
  <input type="number" id="number" id="output" onload="restart();">
  <input type="button" value="<" onclick="minus();">
  <input type="button" value=">" onclick="plus();">
  <input type="button" value="FLIP" onclick="flip();">
  <input type="button" value="STORE" onclick="store();">
  <input type="button" value="CHECK" onclick="check();">
</div>

Answer 2

Try using onChange="".

<input type="text" id="number" id="output" onload="restart();" onChange="updateVal();">

function updateVal() {
  numberValue = number.value;
}

---

I would suggest, for something like this, it would be much easier to use React JS or another framework with state.