CODEWITHSUNDEEP
javascriptjqueryhtmlmathmedian
Rusu Traian Cristian
Rusu Traian Cristian

Reputation: 25

Javascript median calculator

I have this JavaScript which calculates the sum and the average of 4 given numbers.

I want it to do two more things:

  1. Make it also calculate and display median of those numbers
  2. I don't want it to use 4 input fields for 4 numbers, but rather a single field where we can add as many numbers as we want (minimum 2), separated by commas.

I've found some other questions related to this matter, but not with a JavaScript implementation.

function doSums(what) {
    var df = document.forms[0];
    var a = parseFloat(df[0].value);
    var b = parseFloat(df[1].value);
    var c = parseFloat(df[2].value);
    var d = parseFloat(df[3].value);
    if ((isNaN(a)) || (isNaN(b)) || (isNaN(c)) || (isNaN(d))) {
        alert("four numbers please !");
        df.reset();
        df[0].focus();
        return;
    }
    if (what == "total") {
        df[5].value = a + b + c + d;
    } else {
        df[7].value = (a + b + c + d) / 4;
    }
}

JSFiddle

Upvotes: 0

Views: 762

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

To do this with a single input:

  1. split the input's value on commas. This will return an array of numbers.
  2. Use a for loop to iterate through the array, keeping track of the running total.
  3. The average will be the grand total divided by the array's length.

To calculate median:

  1. Sort the array numerically.
  2. If there are an odd number of values, use the middle one. Otherwise, average the two middle ones.

This Snippet does the above, plus it includes error-checking. Note that I multiply the operands by 1 to cast them to numbers rather than using parseFloat. Also, my floor and ceil logic automatically handles cases with an odd or even number of operands.

document.querySelector('#equation').addEventListener('change',function() {
  var ops= this.value
             .split(',')
             .sort(function(a,b){return a-b}),
      len= ops.length,
      valid= true,
      total = 0,
      i,
      error= document.querySelector('#error'),
      stotal= document.querySelector('#total'),
      smean= document.querySelector('#mean'),
      smedian= document.querySelector('#median');
  
  if(len < 2) valid= false;
  else {
    for(i = 0 ; i < len ; i++) {
      if(isNaN(ops[i])) valid= false;
      else total+= ops[i]*1;
    }
  }
  if(!valid) {
    error.style.display= 'block';
    stotal.innerHTML= smean.innerHTML= smedian.innerHTML= '';
  }
  else {
    error.style.display= 'none';
    stotal.innerHTML= total;
    smean.innerHTML= total/len;
    smedian.innerHTML= 
      (ops[Math.floor((len-1)/2)]*1 + ops[Math.ceil((len-1)/2)]*1)/2;
  }
});
body {
  font: 14px verdana;
}

#error {
  color: red;
  display: none;
}
Enter at least two numbers, separated by commas:<br>
<input id="equation" type="text">
<div id="error">Invalid input</div>
<div>Total: <span id="total"></span></div>
<div>Mean: <span id="mean"></span></div>
<div>Median: <span id="median"></span></div>

Upvotes: 1

nniicc
nniicc

Reputation: 244

You shouldn't make the function onLoad event but just include it in your <head> tag inside <script> function doSum(what){ ... } </script>

JsFiddle

Upvotes: 0

Related Questions