Question 251276 in Html Question posted in
Some basic documentation can be found here.

Html – Why the function areaRettangolo return Nan?

Why doesn’t the function areaRettangolo return a number?
I want to calculate the area of a rectangle using a function called areaRettangolo but it returns Nan

let base = document.getElementById('base');
let altezza = document.getElementById('altezza');
let bottone = document.querySelector('button');
let testo = document.querySelector('h1');
let area = 0;

function areaRettangolo(a, b) {
  let c = 0;
  c = a * b;
  return c;
}
bottone.addEventListener('click', () => {
  area = areaRettangolo(base, altezza);
  console.log(area);
});
<input type="number" id="base" placeholder="inserisci la base del rettangolo"><br><br>
<input type="number" id="altezza" placeholder="inserisci l'altezza del rettangolo"><br><br>
<button>Calcola l'area del rettangolo</button>
<h1>-</h1>
Tags:

3

Answers


  1. 0

    It returns NaN (Not a Number) because when you execute c = a * b; JavaScript expects a and b to be numbers or types that can be converted to a number (for example, a numeric string "123" can be converted to the number 123).

    In your code a and b are both a HTMLElement which cannot be converted to a Number automatically.

    Use .value in conjunction with parseInt or parseFloat to get the current value of the element (use parseInt if you expect/allow only whole numbers, parseFloat otherwise):

    area = areaRettangolo(parseFloat(base.value), parseFloat(altezza.value));

    You don’t need to change anything inside the areaRettangolo function.

    Login or Signup to reply.
  2. 0

    This is happening because base and altezza are HTMLElements and not the numbers you are expecting. To get the inserted numbers you need to send input.value to the function instead.

    The inputs base and altezza are of type number so input.valueAsNumber is a better alternative, as it returns the values as numbers instead of strings.

    Be carrefull, input.valueAsNumber works only for some input types as shown in this question.

    let base = document.getElementById('base');
let altezza = document.getElementById('altezza');
let bottone = document.querySelector('button');
let testo = document.querySelector('h1');

function areaRettangolo(a, b) {
  // you can pass the value directly to the variable
  let c =  a * b;
  return c;
}
bottone.addEventListener('click', () => {
  // the area variable is not used out of this function so you dont need to create it on the global scope
  let area = areaRettangolo(base.valueAsNumber, altezza.valueAsNumber); // here, use the `.valueAsNumber` on the imput elements
  testo.innerHTML = "La superficie è: " + area;
});
    <input type="number" id="base" placeholder="inserisci la base del rettangolo"><br><br>
<input type="number" id="altezza" placeholder="inserisci l'altezza del rettangolo"><br><br>
<button>Calcola l'area del rettangolo</button>
<h1>-</h1>
    Login or Signup to reply.
  3. 0

    You must use .value after altezza and base.
    Becouse document.getElementById return a HTMLElement tag and you do’nt have
    direct access to values them! (value)

    let base = document.getElementById('base');
let altezza = document.getElementById('altezza');
let bottone = document.querySelector('button');
let testo = document.querySelector('h1');
let area = 0;

function areaRettangolo(a, b) {
  let c = 0;
  c = a * b;
  return c;
}
bottone.addEventListener('click', () => {
// You can use .valueAsNumber instead of .value becouse your innput value is allways number.
  area = areaRettangolo(base.value, altezza.value);
  console.log(area);
});

    Htmls Code :

    <input type="number" id="base" placeholder="inserisci la base del rettangolo"><br><br>
<input type="number" id="altezza" placeholder="inserisci l'altezza del rettangolo"><br><br>
<button>Calcola l'area del rettangolo</button>
<h1>-</h1>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search