0

I am trying to calculate the sum of my 'var time' so that it can display the total on my table. Could someone tell me how do I go about doing this?

<td>
    <h3 id="Luke Hours">
        <script>
            var time = [2, 0.5, 1];
            document.getElementById("Luke Hours").innerHTML = time;
        </script>
    </h3>
    <h4 id="Luke Time">
         <script>
             var text = "";
             var i;
             for (i = 0; i < time.length; i++) {
                 text += time[i] + "<br>";
             }
             document.getElementById("Luke Time").innerHTML = text;
         </script>
    </h4>
</td>

enter image description here

The number in red is the sum and the ones in black is each individual number. I want it to look like this.

Community
  • 1
  • 1
Richard Siaw
  • 45
  • 8
  • You are not doing addition, because you have included a string: `"
    "` you are doing string concatenation     – Patrick Evans Feb 02 '16 at 03:37
  • @PatrickEvans I don't think that is what he meant. If you look at his code snippet he aligns each element vertically as if he was setting up an elementary addition problem. So, I think he is trying to have a sum underneath the vertical "array" –  Feb 02 '16 at 03:39
  • @DaMaxContent You are almost correct. What I planned on doing was for the sum the numbers to show at the top while at the same time have each individual number appear beneath it. I hope that makes sense – Richard Siaw Feb 02 '16 at 03:46
  • your good. does @TimoSta's solution make sense to you? I can explain it. –  Feb 02 '16 at 03:49
  • 1
    @DaMaxContent It does but the only part I don't understand is (function(previous, current). I'm not sure what previous and current mean or represents. – Richard Siaw Feb 02 '16 at 03:53
  • 1
    Here. Mozilla explains all: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce –  Feb 02 '16 at 03:56
  • @DaMaxContent Ah thank you very much! – Richard Siaw Feb 02 '16 at 03:59
  • @DaMaxContent TimoSta's code work nicely but would it be possible to show each individual number as well? – Richard Siaw Feb 02 '16 at 04:10
  • so as in the `function(previous,current) {...}` statement? –  Feb 02 '16 at 04:12
  • @DaMaxContent I'm not sure... I added a picture so you can have a look. Basically the number in red is the sum which I managed to do but now I want each individual numbers (which is in black) to appear either next to or below the sum. – Richard Siaw Feb 02 '16 at 04:22
  • so like for `[2, 0.5, 1]` you want to display `[2, 2, 2.5, 0.5, 3.5, 1]` in vertical order or `[3.5,2, 0.5, 1]`? –  Feb 02 '16 at 04:29
  • @DaMaxContent [3.5,2,0.5,1] – Richard Siaw Feb 02 '16 at 04:32
  • @DaMaxContent I wanted this line "document.getElementById("Luke Hours").innerHTML = time;" to show 3.5 and this line "document.getElementById("Luke Time").innerHTML = text;" to show 2,0.5,1 I'm sorry that its a bit confusing... – Richard Siaw Feb 02 '16 at 04:34
  • 1
    **change** `var text = "";` **to** `var text=time.reduce(function(previous, current) { return previous + current; });` **\*\*all non-code is bolded** –  Feb 02 '16 at 04:34
  • @DaMaxContent Thanks it works! :) – Richard Siaw Feb 02 '16 at 04:44
  • Don't forget to upvote if you like a solution, and no problem –  Feb 02 '16 at 04:48

1 Answers1

1

You can use the reduce function:

var sum = time.reduce(function(previous, current) { return previous + current; });

This will result in the sum of all numeric values in the array. Note that this can lead to unexpected outcomes if the array contains non-numeric values.

TimoStaudinger
  • 41,396
  • 16
  • 88
  • 94
  • I recommend creating an `array.prototype` declaration as OP (richard siaw) doesn't seem to have an extensive knowledge of arrays. It would certainly make it easier –  Feb 02 '16 at 03:45
  • I will give it a try thank you! – Richard Siaw Feb 02 '16 at 03:51