JavaScript如何实现两个函数返回值计算、解决NaN报错问题

核心问题原因 #

• banyak()函数逻辑错误：
  1. 函数内return语句写在DOM操作前面，return后所有代码永远不会执行
  2. 调用banyak()时没有传入参数，返回值为undefined，参与运算时会转为NaN
• 总价计算逻辑错误：当前代码是把数字和字符串直接拼接，没有先执行乘法运算，数值计算逻辑完全错误
• 冗余问题：存在大量不必要的parseFloat()调用，本身为数字类型的变量不需要重复转换

具体修改代码 #

1. 修改banyak()函数 #

function banyak(value){
  // 先做类型转换，非数字输入默认返回0，避免NaN
  var qty = parseFloat(value) || 0;
  var cobaQty= document.getElementById('cobaQty');
  if(cobaQty) cobaQty.textContent=qty;
  // 所有逻辑执行完再return返回值
  return qty;
}

2. 修改mult()函数末尾的计算逻辑 #

将原末尾的代码：

var banyakqty=banyak();
document.getElementById('rupiah').value = 'Rp. '+hargatotalBCO+(+banyak());

替换为以下代码，注意替换代码中的你的数量输入框ID为你实际页面中数量输入元素的ID：

// 调用banyak时传入实际的数量输入值
var banyakqty = banyak(document.getElementById('你的数量输入框ID').value);
// 先计算总金额：单价*数量，再拼接货币前缀
var totalBayar = Math.ceil(hargatotalBCO * banyakqty);
document.getElementById('rupiah').value = 'Rp. ' + totalBayar;

额外注意 #

调用mult(pj,lb,tg)时，传入的长宽高三个参数也需要先做数字类型转换，避免传入字符串导致运算出NaN，示例如下，替换对应输入框ID即可：

var pj = parseFloat(document.getElementById('pj输入框ID').value) || 0;
var lb = parseFloat(document.getElementById('lb输入框ID').value) || 0;
var tg = parseFloat(document.getElementById('tg输入框ID').value) || 0;
mult(pj, lb, tg);

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