价格计算器proapp2显示NaN而非0.00的问题排查与解决

问题 #

开发价格计算器时，当App-Benutzer滑块值为0，变量proapp2显示NaN，希望改为显示0.00。尝试了if (isNaN(proapp2)) proapp2 = 0.00;和var proapp2 = proapp2 | 0;都无效，求排查错误。

错误原因 #

1. 判断时机错误：你写的if (isNaN(proapp2)) proapp2 = 0.00;放在了proapp2变量定义之前，此时proapp2还未声明，这个判断完全不会生效。
2. NaN产生的根源：当appanzahl为0时，((apppreis * appanzahl) / (appanzahl))是0/0的计算，结果为NaN，调用toFixed(2)后会得到字符串"NaN"，直接赋值给DOM元素就显示NaN了。

解决方案 #

调整代码逻辑，在计算proapp2时先判断appanzahl是否为0，再决定取值：

修改核心代码 #

替换原calcSum函数中proapp2相关的代码部分：

// 修改后的proapp2计算逻辑
let proapp2;
if (appanzahl == 0) {
  proapp2 = "0.00";
} else {
  proapp2 = ((apppreis * appanzahl) / appanzahl).toFixed(2);
}
preisproapp.textContent = proapp2;

附加优化建议 #

• 给未声明的变量加上let声明，避免全局变量污染：

  let apppreis = 7.5;
  let backendpreis = 35;
  

• 将input获取的字符串转成数字类型，避免潜在的字符串运算问题：

  let backendanzahl = Number(document.getElementsByClassName("backenduser")[0].value);
  let appanzahl = Number(document.getElementsByClassName("appuser")[0].value);
  

修改后的完整calcSum函数 #

function calcSum() {
  let backendanzahl = Number(document.getElementsByClassName("backenduser")[0].value);
  let appanzahl = Number(document.getElementsByClassName("appuser")[0].value);
  //Preisstaffelung für app und backend
  let apppreis = 7.5;
  if (appanzahl < 11) {
    apppreis = 7.5;
  } else if (appanzahl < 26) {
    apppreis = 7;
  } else if (appanzahl < 51) {
    apppreis = 6.50;
  } else if (appanzahl < 76) {
    apppreis = 6;
  } else if (appanzahl > 76) {
    apppreis = 5.5;
  }

  let mylist = document.getElementById("myList");
  let backendtype = mylist.options[mylist.selectedIndex].value;
  let backendpreis = 35;
  if (backendtype == "ZR") {
    if (backendanzahl < 5) {
      backendpreis = 35;
    } else if (backendanzahl < 11) {
      backendpreis = 32.50;
    } else if (backendanzahl < 21) {
      backendpreis = 30;
    }
  } else {
    if (backendanzahl < 6) {
      backendpreis = 20;
    } else if (backendanzahl < 11) {
      backendpreis = 18;
    } else if (backendanzahl < 21) {
      backendpreis = 16;
    }
  }

  let mytext = ((backendanzahl * backendpreis + appanzahl * apppreis) * 1).toFixed(2);
  summetext.textContent = mytext;

  let backendpreissumme = (backendanzahl * backendpreis).toFixed(2);
  backendstk.textContent = backendpreissumme;

  let apppreissumme = (appanzahl * apppreis).toFixed(2);
  appstk.textContent = apppreissumme;

  let probackend2 = ((backendpreis * backendanzahl) / (backendanzahl)).toFixed(2);
  preisprobackend.textContent = probackend2;

  // 修改后的proapp2计算逻辑
  let proapp2;
  if (appanzahl == 0) {
    proapp2 = "0.00";
  } else {
    proapp2 = ((apppreis * appanzahl) / appanzahl).toFixed(2);
  }
  preisproapp.textContent = proapp2;

  let jährlicherrabatt = ((backendanzahl * backendpreis + appanzahl * apppreis) * 0.9).toFixed(2);
  jährlich.textContent = jährlicherrabatt;
}

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