Calling functions and getting error that it's not a function in JavaScript

Question

I am in my 2nd JavaScript class and we have not learned the bebugging tools yet, I look at errors that are thrown in the browser. I have the following code (it includes Data Validation):

/**
* displayFunction gets info from form and displays message on screen
* it also called all the validation functions for the form
*/

function displayInfo() {
    //declare variables and initialize them.
    var fullName = document.myForm.fullName.value;
    var int1 = parseInt(document.forms["myForm"]["int1"].value);
    var int2 = parseInt(document.myForm.int2.value);
    var num3 = parseInt(document.myForm.num3.value);
    var num4 = parseInt(document.myForm.num4.value);
    var num5 = parseInt(document.myForm.num5.value);

    //make sure variable flag = 0
    flag = 0;
    //call the Validation functions
    nameValidate(fullName);
    int1Validate(int1);
    int2Validate(int2);
    num3Validate(num3);
    num4Validate(num4);
    num5Validate(num5);

    //call tha functions to find largest and smallest numbers and the sum
    var largest = largest(int1, int2, num3, num4, num5);
    var smallest = smallest(int1, int2, num3, num4, num5);
    var sum = sum(int1, int2, num3, num4, num5);

    //Display the outpu t it everything is entered right.
    if (flag == 1) {
        return false;
    } else {
        document.getElementById("message").innerHTML = "Hello, " + fullName + ". You entered: " + int1 + ", " + int2 + ", " + num3 +
        ", " + num4 + ", " + num5 + ". The largest number entered was " + largest + ". The smallest number you entered was " + smallest + 
        ". And the sum of all of the numbers was " + sum + ".";
    }
}

I am trying to take the numbers from a form and then find the largest number, the smallest number and the sum. I have made separate functions for these and they are called in the code above, but clearly I am missing some huge thing because the inspect window in the browser is throwing the error that "largest" "smallest" and "sum" are not functions. They're in the code. I am trying to do this with an allergy headache and am missing something really small, I hope someone can spot what I am missing.

Here is the largest function, the other two are practically the same:

/**
* largest takes in the numbers and returns the largest number
* @params - 5 ints
* @return - largest number
*/

//declare function largest and take in int1, int2, num3, num4, and num5
function largest (n1, n2, n3, n4, n5) {
    //declare variable largest and use Math.max to find the largest number
    var largest = Math.max(n1, n2, n3, n4, n5);

    return largest;
}

Answer 1

The problem is you're using the same variable name for your result as for the function you're calling. var gets hoisted to the top of its function, so to the interpreter, your code actually looks like this:

function displayInfo() {
  var largest;
  var smallest;
  var sum;
  // ...
  largest = largest(int1, int2, num3, num4, num5);
  smallest = smallest(int1, int2, num3, num4, num5);
  sum = sum(int1, int2, num3, num4, num5);

The interpreter will assume you're referring to the variable named largest closest to the current scope - which in this case is a variable named largest that has not been defined yet. Eg

 function largest() { } function doSomething() { console.log(typeof largest); var largest = largest(); } doSomething(); 

Use different variable names for your results instead:

var largestResult = largest(int1, int2, num3, num4, num5);
var smallestResult = smallest(int1, int2, num3, num4, num5);
var sumResult = sum(int1, int2, num3, num4, num5);