CODEWITHSUNDEEP
javascripthtmlarrays
JAY-ARE-GEE
JAY-ARE-GEE

Reputation: 17

Javascript Arrays. Adding, subtracting and totaling

I'm having a little trouble with an assignment a teacher dished out to my class involving javascript arrays. What they essentially want us to do is to create sort of cart / calculator hybrid that allows users to input numbers, store them and array and display those numbers on the webpage, then be able to either add them together for a total or reset them and start over.

I think I more or less know how to make a reset button, and I believe I've figured out how to add items to the array efficiently enough, but I'm kinda stumped on how to show those items on an html page and how to add them together to make and show a total. Any help would be appreciated, I'm kinda new at this and so far the instructions from our source material are a bit vague and hard to understand, at least for me!

So far I have some simple html for the input field and an "add number" button which will add the input field to the array (I will limit it to numbers only later and will). 

<form onsubmit="return userNumber()">
        <p>Number:</p>
        <input type="text" id="box" /> 
        <br>
        <input type="button" value="Add Number" />
        <input type="button" value="Calculate" />
        <input type="button" value="Reset" />
       </form>

I've no code yet for the Calculate or Reset button, but for the Add Number button which does seem to work properly when I bring up the console, I just need it to also display on the webpage. Here's what I have for that.

var numbers = [];

function userNumber() {
  boxvalue = document.getElementById('box').value;
  numbers.push(boxvalue);  
  console.log(numbers);
  return false;
}

I've attached an image of what our teacher showed us, they want us to make it only similar in function, looks are not as important.

Example

Once again, thank you to anyone who can assist, I'm very lost on where to go from here!

Upvotes: 1

Views: 85

Answers (1)

artanik
artanik

Reputation: 2714

First, give them all an id. It's a lot easier to work with them when they all have the "names". And then you can easily handle the events (clicks in this example).

Notice, when you click on the "Add" button, before push you need to use parseInt(string, base) since input.value is a string, and + operator is concatenation for string, not addition. Like sum += numbers[i]; below.

And there is a couple of protection for corner cases when you click the "Calculate" button with an empty numbers array for example.

var numbers = [];
var boxInput = document.getElementById("box");
var addBtn = document.getElementById("add");
var calculateBtn = document.getElementById("calculate");
var resetBtn = document.getElementById("reset");
var allNumbers = document.getElementById("all-numbers");
var calculatedNumbers = document.getElementById("calculated-numbers");

addBtn.addEventListener("click", function() {
  if (boxInput.value.length > 0) {
    numbers.push(parseInt(boxInput.value, 10));
    boxInput.value = "";
  }

  allNumbers.innerHTML = numbers.join(" ");
});

calculateBtn.addEventListener("click", function() {
  if (numbers.length === 0) {
    return;
  }

  for (var i = 0, sum = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }

  calculatedNumbers.innerHTML = numbers.join(" + ") + " = " + sum;
});

resetBtn.addEventListener("click", function() {
  numbers = [];
  boxInput.value = "";
  allNumbers.innerHTML = "";
  calculatedNumbers.innerHTML = "";
});
<p>
  <label for="box">Number:</label>
  <input id="box" type="number" />
</p>

<p>
  <input type="button" id="add" value="Add Number" />
  <input type="button" id="calculate" value="Calculate" />
  <input type="button" id="reset" value="Reset" />
</p>

<h3>Numbers added:</h3>
<p id="all-numbers"></p>

<h3>Sums of numbers added:</h3>
<p id="calculated-numbers"></p>

Upvotes: 1

Related Questions