Как отобразить многопользовательский ввод - PullRequest
Новая
       40

Как отобразить многопользовательский ввод

0 голосов
/ 17 октября 2019

Я пытаюсь получить пользовательский ввод и отобразить его обратно пользователю, но он продолжает сбрасываться после того, как пользователь вводит что-то, например, начинайте с 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>

1 Ответ

0 голосов
/ 18 октября 2019

Просто, если кто-то сталкивается с этим позже и у вас возникла та же проблема, все, что вам нужно сделать, это добавить + = вместо просто = в качестве вывода

из 

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;
...