为何areaRettangolo函数返回NaN？矩形面积计算函数异常排查

问题出在你直接把DOM元素对象传给了计算函数，而不是输入框里的实际数值。DOM元素本身是对象，对象之间相乘会得到NaN。

修正方案： #

• 调用areaRettangolo时，要先获取输入框的value值，再把字符串类型的数值转成数字类型（用Number()或parseFloat()都可以）

修正后的JavaScript代码： #

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', () => {
  // 获取输入框数值并转成数字
  const baseNum = Number(base.value);
  const altezzaNum = Number(altezza.value);
  area = areaRettangolo(baseNum, altezzaNum);
  console.log(area);
  // 顺便把结果显示到h1标签里
  testo.textContent = area;
});

额外优化提示： #

如果用户输入空值或非数字内容，Number()会返回NaN，可以加个判断处理这种情况：

bottone.addEventListener('click', () => {
  const baseNum = Number(base.value);
  const altezzaNum = Number(altezza.value);
  if (isNaN(baseNum) || isNaN(altezzaNum)) {
    testo.textContent = "请输入有效数字";
    return;
  }
  area = areaRettangolo(baseNum, altezzaNum);
  console.log(area);
  testo.textContent = area;
});

内容的提问来源于stack exchange，提问作者Niketake