Returning the value to input-CodePudding

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>

CodePudding user response：

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

or alternatively, you only need one variable total, and you don't need to reassign it to "number.value", but the only thing is that this way there's no guarantee that number.value is a number at all, but when you set it to a variable first, like above, you can check if(!isNaN) or something similar, but still, if we want to assume only numbers will ever be entered, we can do something like

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


function minus() {

  number.value = number.value -= 1;
  console.log(number,number.value);
}

CodePudding user response：

Try this instead.

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

function minus() {
  number.value = number.value -= 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>