如何显示多个用户输入

Question

我正在尝试获取用户输入并将其显示给用户，但它在用户输入后继续重置，例如，从1000开始，然后输入10现金，结果是990，但在您再次输入20之后，它没有保存您输入的990，而是重新开始并输出980

你可以明白我在这里的意思

https://codepen.io/scottajames/pen/mddreXz

​

//  Hides everything in the Content-2 Div-
document.getElementById("Content-2").hidden = true;

// Unhides everything in the content-2 div and hides everything in the content-1 div and saves the input of the monthly id 
function FirstButton() {
  var a = document.getElementById("Monthly").value;
  document.getElementById("Monthly-Amount").innerHTML = a;
  document.getElementById("Content-2").hidden = false;
  document.getElementById("Content-1").hidden = true;
}
// adds the content-2 inputs together and takes away the price from the total
function SecondButton() {
  var b = document.getElementById("Item").value;
  var c = document.getElementById("Price").value;
  document.getElementById("Item-Price").innerHTML = b + ' ' + c;

  var d = document.getElementById("Monthly").value;
  document.getElementById("Monthly-Amount").innerHTML = d - c;
}

body {
  background: #34EBC6;
}

#Content {
  margin: 0 auto;
  position: relative;
  top: 200px;
  width: 500px;
}

input {
  width: 350px;
  height: 60px;
  outline: none;
  font-size: 24px;
  padding-left: 30px;
  display: inline-block;
  border-radius: 5px;
  border: none;
  background: #0e8b72;
  color: white;
}

::placeholder {
  color: white;
}

button {
  position: relative;
  height: 60px;
  width: 100px;
  font-size: 25px;
  border-radius: 5px;
  border: none;
  color: white;
  background: #0e8b72;
}

#Content-1 h1 {
  position: relative;
  left: 100px;
  color: white;
  font-size: 25px;
  font-family: sans-serif;
  font-weight: 400;
}

#Content-2 h1 {
  color: white;
  font-size: 25px;
  font-family: sans-serif;
  font-weight: 400;
}

#Monthly-Amount {
  position: relative;
  top: -10px;
  left: 150px;
  font-size: 40px;
  font-family: sans-serif;
  color: white;
  font-weight: 400;
}

#Item-Price {
  position: relative;
  top: 50px;
  border-top: 1px solid black;
  padding-top: 25px;
  padding-left: 25px;
}

<div id="Content">

  <div id="Content-1">
    <h1>Monthly Budget </h1><input type="text" id="Monthly" placeholder="0.00" required>
    <button id="Button-1" onclick="FirstButton()">Next</button>
  </div>

  <h1 id="Monthly-Amount"></h1>


  <div id="Content-2">


    <h1>Item: </h1><input type="text" id="Item" placeholder="Item" required>
    <h1>Price: </h1><input type="text" id="Price" placeholder="Price" required>
    <button id="Button-2" onclick="SecondButton()">Next</button>

    <h1 id="Item-Price"></h1>
  </div>
</div>

​

Answer 1

以防以后有人遇到同样的问题，您所要做的就是添加一个+=，而不仅仅是=作为输出

从…

document.getElementById("Item-Price").innerHTML = b +' '+ c;

至

document.getElementById("Item-Price").innerHTML += b +' '+ c;

和

  var d = document.getElementById("Monthly").value;
  document.getElementById("Monthly-Amount").innerHTML = d - c;

被更改为

document.getElementById("Monthly-Amount").innerHTML -=  c;