Locate the Greatest Number in JS

Question

I am attempting to enter in 3 number input fields in my HTML, listed below:

HTML File-

<label for="num1">Enter number 1.</label><input type="text" size="20" id="num1">

<label for="num2">Enter number 2.</label><input type="text" size="20" id="num2">

<label for="num3">Enter number 3.</label><input type="text" size="20" id="num3">

<div id="greatestbutton" class="button">Click here to get the Greatest Number!</div>

<div>The greatest number is <span id="num1 || num2 || num3"></span></div>

Once these number have been entered, I want to ensure that they are indeed numbers and not letters and I wanted to take the greatest of those that have been entered: JS File-

var button = document.getElementById("greatestbutton");
   button.onclick = function greaterNumber(num1, num2, num3) {
      var a = parseFloat(num1);
      var b = parseFloat(num2);
      var c = parseFloat(num3);
var greatest = Math.max(a, b, c);
   return greatest;

   }

}

I can 'see' the 'button' accept the click, but I am unable to get it to return anything, let alone the greatest number.

Any help for this newbie would be greatly appreciated!!

Thanks!!!

Answer 1

You aren't passing any values to the function greaterNumber, it doesn't just take values automatically. In this case you want to give it the values from the input fields, you can do that in a lot of ways, one of them being:

var button = document.getElementById("greatestbutton");
button.onclick = function greaterNumber() {
    var a = parseFloat(document.getElementById('num1').value); // get value
    var b = parseFloat(document.getElementById('num2').value);
    var c = parseFloat(document.getElementById('num3').value);
    var greatest = Math.max(a, b, c);
    return greatest;
}

return simply returns the value to whatever you call it from, in this fiddle i used alert instead just to prove that it works http://jsfiddle.net/NMys3/

Answer 2

Change the result element's id first:

<div>The greatest number is <span id="result"></span></div>

Then modify the button click function a little:

var button = document.getElementById("greatestbutton");
button.onclick = function() {

  var num1 = document.getElementById('num1').value; // get value from inputs
  var num2 = document.getElementById('num2').value;
  var num3 = document.getElementById('num3').value;
  var a = parseFloat(num1);
  var b = parseFloat(num2);
  var c = parseFloat(num3);
  var greatest = Math.max(a, b, c);

  document.getElementById('result').innerHTML = greatest; // set value for result
}

Answer 3

A couple of points:

1) You seem to be assuming that the form's input values will be passed automatically as arguments to the event callback. They will not - all that's passed to the event callback is the event object itself. You need to grab those values manually, yourself.

2) You can't merely return the value from the event callback - you need to do something with it.

3) You don't say what should happen if one or more values are not numbers; presumably a message should appear or something, which is what I've assumed.

4) Not sure what you meant by that weird id attribute on the span; it seems like you've made a lot of assumptions about how code works here. Give it an ID of something like "max_num".

Try:

document.querySelector('#greatestbutton').addEventListener('click', function() {
    var num_nums = 3, nums = [];
    for (var i=0; i<num_nums; i++) {
        var val = document.querySelector('#num'+(i+1)).value;
        if (!parseFloat(val)) { alert('bad input!'); return false; }
        nums.push(val);
    }
    document.querySelector('#max_num').innerHTML = Math.max.apply(null, nums);
}, false);

Note I have also...

1) Modernised the code slightly; it's better to register events using addEventListener (for reasons that are beyond the scope of this question) and I've used the ECMA5 jQuery-like method querySelector, which finds elements by CSS-style syntax

2) Made it dynamic for N numbers; your code is hard-coded to three, and requires more lines of code should this number be increased at any point