--- id: 635089e3bd3e144f2db4094f title: Step 18 challengeType: 0 dashedName: step-18 --- # --description-- If you test your form with a list of numbers, you should see the mean display on the page. However, this only works because freeCodeCamp's iframe has special settings. Normally, when a form is submitted, the event triggers a page refresh. To resolve this, add `return false;` after your `calculate();` call in the `onsubmit` attribute. # --hints-- Your `onsubmit` attribute should have a `return false;` statement. ```js assert.match(document.querySelector("form").getAttribute("onsubmit"), /return\s+false\s*;?/); ``` Your `onsubmit` attribute should still call `calculate()`. ```js assert.match(document.querySelector("form").getAttribute("onsubmit"), /calculate\(\s*\)/); ``` You should return `false` after you call `calculate()`. ```js assert.match(document.querySelector("form").getAttribute("onsubmit"), /calculate\(\s*\)\s*;?\s*return\s+false\s*;?/); ``` # --seed-- ## --seed-contents-- ```html Statistics Calculator

Statistics Calculator

Enter a list of comma-separated numbers.

--fcc-editable-region--
--fcc-editable-region--

The mean of a list of numbers is the average, calculated by taking the sum of all numbers and dividing that by the count of numbers.

Mean:

The median of a list of numbers is the number that appears in the middle of the list, when sorted from least to greatest.

Median:

The mode of a list of numbers is the number that appears most often in the list.

Mode:

The range of a list of numbers is the difference between the largest and smallest numbers in the list.

Range:

The variance of a list of numbers measures how far the values are from the mean, on average.

Variance:

The standard deviation of a list of numbers is the square root of the variance.

Standard Deviation:

``` ```css body { margin: 0; background-color: rgb(27, 27, 50); text-align: center; color: #fff; } button { cursor: pointer; background-color: rgb(59, 59, 79); border: 3px solid white; color: white; } input { background-color: rgb(10, 10, 35); color: white; border: 1px solid rgb(59, 59, 79); } .bold { font-weight: bold; } ``` ```js const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length; const calculate = () => { const value = document.querySelector("#numbers").value; const array = value.split(/,\s*/g); const numbers = array.map(el => Number(el)).filter(el => !isNaN(el)); const mean = getMean(numbers); document.querySelector("#mean").textContent = mean; } ```