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;
}

Can you show us the error message? It just helps with finding a solution ^^ — Gorgamite
– Gorgamite, Commented Apr 21, 2018 at 4:27
I would have thought I could just call the function and use what was returned for the text output, but what was displayed was the full function and not the result. — Lisa
– Lisa, Commented Apr 21, 2018 at 4:28
assignment2.js:31 Uncaught TypeError: largest is not a function at displayInfo (assignment2.js:31) at HTMLInputElement.onclick (dataValidation.html:31) — Lisa
– Lisa, Commented Apr 21, 2018 at 4:29

CertainPerformance · Accepted Answer · 2018-04-21 04:32:44Z

3

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);

edited Apr 21, 2018 at 4:32

answered Apr 21, 2018 at 4:30

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lisa Over a year ago

Thank you, it's hard to think with a headache and a stuffed up nose

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related