Her Man Her Man - 1 month ago 6
Javascript Question

JavaScript - saving input value and cleaning the input afterwards so it can be reused without refreshing page

I'm new to JavaScript so forgive my ignorance in this case.
I'm trying to create a script that makes it possible for the user to give in a number in an input field. This number(1) needs to be stored somehow after the user hits "Enter" on the keyboard and the input field should become empty again for the user to give in a new number(2). After hitting a second time on the "Enter" button the script needs to calculate automatically how much number(1) + number(2) is together. And this needs to be possible for an undefined amount of numbers..

So far i figured it might be useful to add those numbers to an array, since i have no idea how to solve this task with the use of just a function.

I managed to get the field empty again and the number stored and printed.

My question is, how do i calculate the results? Because for now it just prints the array made in one big line of numbers instead. I can't seem to find out how to calculate it all.. Maybe you guys know a way to do it?

Another question i have, is this possible at all without using an array?

<!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>

Answer

Edit: You've changed your question after the fact. The reason your sum displays as a long line of numbers is that the values in the numbers array are strings, and if you combine them with the + operator, the result will be a concatenated string. You need to start showResults off at 0 and convert each member of the array to a number (or convert them to numbers when adding them to the array).

Explanation from original answer:

The problem you're having is that you are overwriting the showInput and showResults variables on every iteration of the loop instead of adding to them. The += operator will help with this.

Also, there's a better way to clear the input that doesn't involve replacing its whole HTML. See below.

<!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>