JavaScript - 保存输入值并在之后清理输入，以便可以在不刷新页面的情况下重用它答案

【问题标题】：JavaScript - saving input value and cleaning the input afterwards so it can be reused without refreshing pageJavaScript - 保存输入值并在之后清理输入，以便可以在不刷新页面的情况下重用它
【发布时间】：2016-10-27 15:07:34
【问题描述】：

我是 JavaScript 新手，所以请原谅我在这种情况下的无知。我正在尝试创建一个脚本，使用户可以在输入字段中输入数字。这个数字（1）需要在用户按下键盘上的“Enter”后以某种方式存储，并且输入字段应该再次变为空，以便用户输入一个新的数字（2）。在“Enter”按钮上第二次点击后，脚本需要自动计算 number(1) + number(2) 加在一起的数量。对于未定义数量的数字，这需要成为可能..

到目前为止，我认为将这些数字添加到数组中可能很有用，因为我不知道如何仅使用一个函数来解决此任务。

我设法再次使该字段为空，并存储并打印了数字。

我的问题是，我如何计算结果？因为现在它只是打印由一大行数字组成的数组。我似乎无法找出如何计算这一切。也许你们知道一种方法吗？

我还有一个问题，不使用数组这是否可能？

<!DOCTYPE html>
<html>
<body>

<p>Give me a number:</p>
<p id="inputNumber"><input type="number" id="new" onchange="submit()"></p>
<p>Your input:</p>
<p id="input"></p>
<p>Results of calculations:</p>
<p id="results"></p>


<script>
// Create an Array to hold the numbers
var numbers = [];

// Create a Function to get the numbers and store them in the Array 'numbers'
function submit() {

    // Get the user input
    var newNumber = document.getElementById("new");

    // Adding it to the array number
    numbers.push(newNumber.value);

    // Make input field empty for re-use
    document.getElementById("inputNumber").innerHTML = "<input type=\"number\" id=\"new\" onchange=\"submit()\">";

    // Create a for loop that loops through the Array 'numbers'
    var showInput = "";
    for (var i = 0; i < numbers.length; i++) {
       showInput += numbers[i] + "<br>";
       }

    // Showing the input back to user
    document.getElementById("input").innerHTML = showInput;

    // Create a for loop that loops through the Array 'numbers'
    var showResults = "";
    for (var i = 0; i < numbers.length; i++) {
       showResults += numbers[i];
       }
    // Showing the results of the calculation
    document.getElementById("results").innerHTML = showResults;
}


</script>

</body>
</html>

【问题讨论】：

标签： javascript function input

【解决方案1】：

编辑：事后你改变了你的问题。总和显示为一长串数字的原因是 numbers 数组中的值是字符串，如果将它们与 + 运算符组合，结果将是一个串联的字符串。您需要从 0 开始关闭 showResults 并将数组的每个成员转换为数字（或将它们添加到数组时将它们转换为数字）。

原始答案的解释：

您遇到的问题是您在循环的每次迭代中都覆盖了showInput 和showResults 变量，而不是添加到它们中。 += 运算符将对此有所帮助。

此外，还有一种更好的方法来清除不涉及替换整个 HTML 的输入。见下文。

<!DOCTYPE html>
<html>

<body>

  <p>Give me a number:</p>
  <p id="inputNumber">
    <input type="number" id="new" onchange="submit()">
  </p>
  <p>Your input:</p>
  <p id="input"></p>
  <p>Results of calculations:</p>
  <p id="results"></p>


  <script>
    // Create an Array to hold the numbers
    var numbers = [];

     // Create a Function to get the numbers and store them in the Array 'numbers'
    function submit() {

      // Get the user input
      var newNumber = document.getElementById("new");

      var showInput = '';
      var showResults = 0;

      // Adding it to the array number
      numbers.push(newNumber.value);

      // Make input field empty for re-use
      newNumber.value = '';

      // Create a for loop that loops through the Array 'numbers'
      for (var i = 0; i < numbers.length; i++) {
        showInput += numbers[i] + "<br>";
      }

      // Showing the input back to user
      document.getElementById("input").innerHTML = showInput;

      // Create a for loop that loops through the Array 'numbers'
      for (var i = 0; i < numbers.length; i++) {
        showResults += Number(numbers[i]);
      }
      // Showing the results of the calculation
      document.getElementById("results").innerHTML = showResults;
    }
  </script>

</body>

</html>

还有一些别致的方法可以在不显式使用循环的情况下进行连接和加法。作为附录，您可以这样做：

<!DOCTYPE html>
<html>

<body>

  <p>Give me a number:</p>
  <p id="inputNumber">
    <input type="number" id="new" onchange="submit()">
  </p>
  <p>Your input:</p>
  <p id="input"></p>
  <p>Results of calculations:</p>
  <p id="results"></p>


  <script>
    // Create an Array to hold the numbers
    var numbers = [];

     // Create a Function to get the numbers and store them in the Array 'numbers'
    function submit() {

      // Get the user input
      var newNumber = document.getElementById("new");

      // Adding it to the array number
      numbers.push(newNumber.value);

      // Make input field empty for re-use
      newNumber.value = '';

      // Create a for loop that loops through the Array 'numbers'
      var showInput = numbers.map(function (n) {
          return n + '<br>';
      }).join('');

      // Showing the input back to user
      document.getElementById("input").innerHTML = showInput;

      // Create a for loop that loops through the Array 'numbers'
      var showResults = numbers.reduce(function (l, r) {
          return l + Number(r);
      }, 0);

      // Showing the results of the calculation
      document.getElementById("results").innerHTML = showResults;
    }
  </script>

</body>

</html>

根据要求，以下是不将值存储在数组中的方法：

<!DOCTYPE html>
<html>

<body>

  <p>Give me a number:</p>
  <p id="inputNumber">
    <input type="number" id="new" onchange="submit()">
  </p>
  <p>Your input:</p>
  <p id="input"></p>
  <p>Results of calculations:</p>
  <p id="results">0</p>


  <script>
     // Create a Function to get the numbers and store them in the Array 'numbers'
    function submit() {
      // Get the user input
      var newNumber = document.getElementById("new");

      // store the value to a variable
      var newValue = newNumber.value;

      // Make input field empty for re-use
      newNumber.value = '';

      // append to the list of entered values
      var inputs = document.getElementById("input");
      inputs.innerHTML += newValue + '<br>';

      // Update the total
      var results = document.getElementById("results");
      results.textContent = Number(results.textContent) + Number(newValue);
    }
  </script>

</body>

</html>

【讨论】：

是否有可能在不使用数组的情况下完成这一切？
@HerMan 是的，当然可以，但你为什么不想使用数组？
我想学习如何做所有可能的方式以备将来使用！ :)

【解决方案2】：

首先，我认为这样清除您的输入会更容易

// Make input field empty for re-use
newNumber.value='';

为了得到总和，你可以像这样遍历数组

var total = 0;
for(var i in numbers )
{
     total += numbers[i];
}

【讨论】：

【解决方案3】：

只需更改此行....

// Make input field empty for re-use
    document.getElementById("inputNumber").innerHTML = "<input type=\"number\" id=\"new\" onchange=\"submit()\">";

到这个。

// Make input field empty for re-use
    document.getElementById("new").value= "";

【讨论】：

或者到：newNumber.value = '';不管怎么说，还是要谢谢你！ ;)

【解决方案4】：

我正在执行加法计算。答案结束

没有数组。

它会保存输入直到页面刷新

更新

function submit() {
  //get the value from input string
       var newNumber = document.getElementById("new").value;
  //after hit enter clear the input field       
  document.getElementById("new").value ="";
  //its will place the value one by one  see the `+` before `=` it  will show the values
         document.getElementById("input").innerHTML += newNumber + "<br>";
  // this `store` variable get value from result.   
  var store = document.getElementById("results").innerHTML;
  //first time the result is a empty so apply with if condition.The nxt time click its load previous result value.is not ah empty so direct with calculation
  if(store =="")
  //its a empty store the variable is `0`
  {store='0';} 
  
  //its willl adding the previous result and newvalue(calculation)
 document.getElementById("results").innerHTML=Math.floor(parseFloat(newNumber)+parseFloat(store));
   
    
    }

<p>Give me a number:</p>
    <p id="inputNumber"><input type="number" id="new" onchange="submit()"></p>
    <p>Your input:</p>
    <p id="input"></p>
    <p>Results of calculations:</p>
    <p id="results"></p>

【讨论】：

完美！谢谢一米！只是关于您的代码的一个问题。它在哪里计算以及在哪里存储数字？我看到它发生了，只是不要太遵循代码:))
@Her Man 你对接受答案有点困惑吗？