Why doesn't this simple JavaScript program work?

Question

I'm trying to display the minimum, the maximum and the mean from an array of numbers entered by the user.

The Console of the browser tells me that min() and max() aren't functions
Error displayed :

Uncaught TypeError: max is not a function
at HTMLInputElement.onclick (numbers.html:7)
onclick @ numbers.html:7

Only the mean function works, the others don't ... why??

var i;
var num = new Array();
window.alert("enter 10 numbers:");
for (i = 0; i < 10; i++) {
  num[i] = parseInt(prompt("num"));
}

function max() {
  var max = num[0];
  for (i = 0; i < 10; i++) {
    if (max < num[i]) {
      max = num[i];
    }
  }
  window.alert("the max is: " + max);
}

function min() {
  var min = num[0];
  for (i = 0; i < 10; i++) {
    if (min > num[i]) {
      min = num[i];
    }
  }
  window.alert("the min is: " + min);
}

function mean() {
  var mean = 0;
  for (i = 0; i < 10; i++) {
    mean += num[i];
  }
  mean = mean / 10;
  window.alert("mean : " + mean);
}

<!DOCTYPE html>
<html>

<head>
  <title>Numbers</title>
</head>

<body>
  <input type="button" value="max" onclick="max()"><br>
  <input type="button" value="min" onclick="min()"><br>
  <input type="button" value="mean" onclick="mean()"><br>
  <script src="numbers.js"></script>
</body>

</html>

Duplicate of [Uncaught TypeError: lang is not a function](https://stackoverflow.com/q/38276407/4642212). Inline event handlers like `onclick` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_—_dont_use_these) instead. This is one of the reasons why. — Sebastian Simon, Feb 06 '21 at 22:26
`min` and `max` refer to the _strings_ [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmin) and [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmax), respectively. — Sebastian Simon, Feb 06 '21 at 22:30
This is not the answer to your question, but something good to know is that everywhere you use `var`, you should be using `let`. I'll let you run down the rabbit hole in finding out why. — awesame, Feb 06 '21 at 22:32
@SebastianSimon Thanks that explains it, but it's a bit confusing at the same time ... it sees functions like _max()_ as attributes of the _input_ . don't the brakets signify something? — Leonardo T., Feb 06 '21 at 23:00
@LeonardoT. It’s confusing because you’re using legacy DOM 0 events instead of modern event listeners. The parentheses attempt to call a value as a function; they don’t turn the value into a function, and they don’t “pick” a function called “max” or “min” — `min` and `max` don’t refer to any function within `onclick`. — Sebastian Simon, Feb 06 '21 at 23:32

Sedki Sghairi · Answer 1 · 2021-02-06T22:53:51.703

Try to call you functions differently, for example you can call your max function maximum instead and make sure you change it to maximum in your html onclick handler. when you declare a variable with "var" it's declared globally (one good reason why you should avoid doing that and use let and const instead). your code should look like this:

var i;
var num = new Array();
window.alert('enter 10 numbers:');
for (i = 0; i < 10; i++) {
    num[i] = parseInt(prompt('num'));
}
var max;
var min;
function maximum() {
    max = num[0];
    for (i = 0; i < 10; i++) {
        if (max < num[i]) {
            max = num[i];
        }
    }
    window.alert('the max is: ' + max);
}

function minimum() {
    min = num[0];
    for (i = 0; i < 10; i++) {
        if (min > num[i]) {
            min = num[i];
        }
    }
    window.alert('the min is: ' + min);
}

function mean() {
    var m = (max + min) / 2;
    window.alert('mean : ' + m);
}

your html:

 <input type="button" value="max" onclick="maximum()"><br>
 <input type="button" value="min" onclick="minimum()"><br>
 <input type="button" value="mean" onclick="mean()"><br>

score -1 · Answer 2 · answered Feb 06 '21 at 22:52

-1

Min and max are reserved names change the names of the functions to _min _max

answered Feb 06 '21 at 22:52

Jason VanHil

114
1
6

Why doesn't this simple JavaScript program work?

2 Answers2