Returning the value to input

November 22, 2021

From input i enter numbers in the input text, then i have 5 buttons that have functions on them i tried to make the first button to minus the number by 1 but i don’t know when i click the number get -1 but it doesn’t show changes to the input box. How can i fix this i mean don’t know how to do it because i tried using number.innerHTML = number-=1 but it doesn’t work ? Here is my html and javascript code:

var number = document.getElementById("number");
number = number.value;

function minus() {
  number.value = number -= 1;
  console.log(number);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div>
    <input type="text" id="number" id="output">
    <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>

</body>

</html>

>Solution :

Ok let’s think logically here

var number = document.getElementById("number");
number = number.value;

function minus() {
  number.value = number -= 1;
  console.log(number);
}

first you’re assigning the HTML ELEMENT itself to the var "number", then you’re changing the value of the "number" var to the value of the HTML element, so then number.value = number - 1 is trying to set the property of "value" of a number object, which doesn’t make sense, because it’s not connected to the HTML element anymore

Just make two variables it should be fine, like

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

function minus() {
  numberValue = number.value;
  number.value = numberValue -= 1;
  console.log(number,numberValue);
}