JavaScript开发问题：如何调用函数返回值计算表单总金额

问题原因 #

• 函数名total和按钮元素的id属性total重名：浏览器会自动将带id的DOM元素挂载到window全局对象上，你定义的total()函数会被按钮DOM对象覆盖，触发点击事件时无法调用到你写的计算函数。
• 可选优化点：input的value默认是字符串类型，最好主动转换为数字，避免空值/非数字输入时计算出NaN。
• 额外冲突点：adult()函数中也存在修改tprice元素内容的逻辑，会和total()的计算结果冲突，非必要可以删除。

修正方案 #

1. 修改HTML避免命名冲突 #

将按钮的id从total改为其他值即可：

<input id="adulte" name="adulte" style="width: 40px" onchange="adult();" />
<span id="aprice"> 100</span>$/nuit
<p> Hébergements pour les adultes = <span id="asub">100</span>$</p>

<button id="total-btn" name="total" onclick="total();">calculate</button>
<span id="tprice"> 50</span>$

2. 优化JS代码增强鲁棒性 #

function adult() {
  // 主动转数字，空值默认取0避免NaN
  let a = Number(document.getElementById("adulte").value) || 0;
  let t = a * 100
  document.getElementById("asub").innerHTML = t
  console.log(t);
  // 非必要可删除该行，避免和total的计算结果冲突
  // document.getElementById("tprice").innerHTML = a;
  return t;
}

function total() {
  let a = adult();
  document.getElementById("tprice").innerHTML = a;
  console.log(a);
}

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