Sum two highest values using reverse() javascript

Question

How do I sum the two highest values from a list of inputs using JavaScript?

I've tried the below, but I get 4 instead of 5:

<table id="tableID">
<tr>
<td>   <input name="name" class="compulsory1" type="text" value="1" />  </td>
<td>   <input name="name1" class="compulsory1" type="text" value="3" />  </td>
<td>   <input name="name2" class="compulsory1" type="text" value="2" />  </td>

<td>
<script type="text/javascript">
var tdsCompulsory = document.getElementsByClassName('compulsory1');
var len = tdsCompulsory.length;
var cDatax = [];
var cData = cDatax.reverse();
sum = 0;
for(var i = 0; i < 2; i++){
    cData.push(tdsCompulsory[i].value); 
    sum += +tdsCompulsory[i].value; 
}
alert (sum);

</script>

</td>

</tr>
</table>

What do you mean by "the two highest"? Highest in value? The last two in the list? — T.J. Crowder, Jul 29 '16 at 10:02
var cDatax = []; var cData = cDatax.reverse(); As, earlier, the cDatax array was empty initial. How you can reverse the elements of empty array and store in cData array? — solanki..., Jul 29 '16 at 10:04
@T.J.Crowder that is what the question says. highest in value — Omari Victor Omosa, Jul 29 '16 at 10:05
@T.J.Crowder help me to edit the title. I am not good in english — Omari Victor Omosa, Jul 29 '16 at 10:08

score 1 · Accepted Answer · edited May 23 '17 at 12:14

First you find the two highest values, and then sum them together. I'd probably do it something like this:

document.getElementById("the-button").onclick = function() {
    // Get the values as numbers
    var values = Array.prototype.map.call(
        document.getElementsByClassName('compulsory1'),
        function(input) {
            return +input.value; // + converts to number
        }
    );

    // Put them in order *highest* to *lowest*
    values.sort(function(left, right) {
        return right - left;
    });

    // Add the first two
    var result = values[0] + values[1];
    console.log(values[0] + " + " + values[1] + " = " + result);
};

<input name="name" class="compulsory1" type="text" value="1" />
<input name="name1" class="compulsory1" type="text" value="3" />
<input name="name2" class="compulsory1" type="text" value="2" />
<input id="the-button" type="button" value="Run">

More about that Array.prototype.map.call thing in this answer about looping through arrays and array-like things.

But if you specifically want to use reverse, you'd do that after the sort:

document.getElementById("the-button").onclick = function() {
    // Get the values as numbers
    var values = Array.prototype.map.call(
        document.getElementsByClassName('compulsory1'),
        function(input) {
            return +input.value; // + converts to number
        }
    );

    // Put them in order lowest to highest
    values.sort(function(left, right) {
        return left - right;
    });

    // Then reverse that
    values.reverse();

    // Add the first two
    var result = values[0] + values[1];
    console.log(values[0] + " + " + values[1] + " = " + result);
};

<input name="name" class="compulsory1" type="text" value="1" />
<input name="name1" class="compulsory1" type="text" value="3" />
<input name="name2" class="compulsory1" type="text" value="2" />
<input id="the-button" type="button" value="Run">

There is a problem with your code; It does not work correctly when value of ` ` is changed to ` ` Still value of three is sorted before 10 — Omari Victor Omosa, Jul 29 '16 at 17:32
@krushiovida: Fixed. I'd forgotten that `Array#sort` defaults to a *string* sort, even if the data in the array is numbers, not strings. So we have to pass in our own comparison function no matter what we do. Which changes the first example above -- if we're going to pass our own function *anyway*, we may as well have it give us the results in a convenient order. — T.J. Crowder, Jul 29 '16 at 17:47

score 1 · Answer 2 · answered Jul 29 '16 at 10:14

You could try something like following:

function PickTwoHighestCtrl() {
  let els = document.querySelectorAll(".compulsory1");
  
  let values = Array.prototype.map.call(els, (el) => {
    return Number(el.value) || 0;
  });
  
  
  let highest = Math.max.apply(Math, values);
  
  let secondHighest = Math.max.apply(
    Math, values.filter(e => e !== highest)
  );
  
  console.log("Two highest values are:", highest, secondHighest, "and their sum is", highest + secondHighest)
}

document.addEventListener("DOMContentLoaded", PickTwoHighestCtrl);

<input class="compulsory1" type="text" value="1" />
<input class="compulsory1" type="text" value="3" />
<input class="compulsory1" type="text" value="2" />

score 1 · Answer 3 · answered Jul 29 '16 at 10:17

Check this fiddle

<html>
    <head>
    <script>
    var tdsCompulsory = document.getElementsByClassName('compulsory1');
    var cDatax = [];
    sum = 0;
    for(var i = 0; i < 3; i++){
        cDatax.push(tdsCompulsory[i].value); 
     }

    // let's convert it to a real array of numbers, not of strings :
    var intArray = cDatax.map(Number);
    var max = Math.max.apply(null, intArray);
    // now let's sort it and take the second element :
    var second = intArray.sort(function(a,b){return b-a})[1];
    var sum = max+second;
    alert(sum)
    </script>
    </head>
    <body>
    <table id="tableID">
    <tr>
    <td>   <input name="name" class="compulsory1" type="text" value="1" />  </td>
    <td>   <input name="name1" class="compulsory1" type="text" value="3" />  </td>
    <td>   <input name="name2" class="compulsory1" type="text" value="2" />  </td>

    <td>


    </td>

    </tr>
    </table>
    </body>
    </html>

score 1 · Answer 4 · edited Jun 20 '20 at 09:12

You can try something like this:

Steps

Get all elements
Get their values. Note, since you expect values to be number, yuo should parse them as well.
Sort value array in descending order instead of .sort + .reverse
Calculate your sum

Sample

// Get all elements
var tdsCompulsory = document.getElementsByClassName('compulsory1');

// Get values from all elements
var valArr = Array.prototype.map.call(tdsCompulsory, function(el) {
  return parseInt(el.value)
});

// Sort value array in descending order
var cDatax = valArr.sort(function(a, b) {
  return b-a
});

var sum = cDatax[0] + cDatax[1];
console.log(sum)

<table id="tableID">
  <tr>
    <td>
      <input name="name" class="compulsory1" type="text" value="1" />
    </td>
    <td>
      <input name="name1" class="compulsory1" type="text" value="3" />
    </td>
    <td>
      <input name="name2" class="compulsory1" type="text" value="2" />
    </td>
  </tr>
</table>

Yosvel Quintero · Answer 5 · 2016-07-29T18:28:46.937

1

var tdsCompulsory = document.getElementsByClassName('compulsory1'),
    cDatax = Array.prototype.map.call(tdsCompulsory, function(el) {
        return parseInt(el.value) || 0;
    }),
    sum = 0;

cDatax
  .sort(function(a, b){
    return a - b;
  })
  .reverse();


sum = cDatax[0] + cDatax[1];
console.log(sum);

<table id="tableID">
  <tr>
    <td><input name="name" class="compulsory1" type="text" value="1" /></td>
    <td><input name="name1" class="compulsory1" type="text" value="3" /></td>
    <td><input name="name2" class="compulsory1" type="text" value="2" /></td>
  </tr>
</table>

edited Jul 29 '16 at 18:28

answered Jul 29 '16 at 10:22

Yosvel Quintero

18,669
5
37
46

1

There is a problem with your code; It does not work correctly when value of ` ` is changed to ` ` Still value of three is sorted before 10 – Omari Victor Omosa Jul 29 '16 at 17:38
1

You right @krushiovida, It is now corrected.. Thanks – Yosvel Quintero Jul 29 '16 at 18:29

Sum two highest values using reverse() javascript

5 Answers5

Steps

Sample