如何显示多个用户输入答案

【问题标题】：How to display multiple user input如何显示多个用户输入
【发布时间】：2020-02-14 09:59:36
【问题描述】：

我正在尝试获取用户输入并将其显示给用户，但在用户输入某些内容后它会不断重置，例如从 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>

【问题讨论】：

我在这里给你做了一个sn-p
我不认为样式表对于这个问题是必要的，它只是让你的 sn-p 看起来很难阅读。

标签： javascript html function var

【解决方案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;

【讨论】：