《HTML5实战》——2.3 计算金额总计，显示表单输出结果

本节书摘来自异步社区《HTML5实战》一书中的第2章，第2.3节，作者： 【美】Rob Crowther , Joe Lennon , Ash Blue , Grey Wanish 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.3 计算金额总计，显示表单输出结果

上一节用data-*属性将键/值对数据和数量字段联系起来，将< output >元素添加到每个产品的购买金额总计和整个订单金额总计上。然而，在现在的状态下，订单似乎并不关心用户在数量字段输入的值，总金额依旧是$0.00。

本节主要学习内容

• 如何使用valueAsNumber属性，以数字形式读取输入值。
• 如何从data-*属性中获取数据。
• 如何更新< output >元素。
  本节将使用data-*属性与< output >元素来计算金额总计，然后把结果显示在用户的浏览器上。主要有以下4步内容。
• 第1步：添加函数来计算总数。
• 第2步：获取输入字段的数量值。
• 第3步：获取价格值并分别算出各个产品与整个订单的金额总计。
• 第4步：在订单中显示更新后的金额总计。
  2.3.1 构建计算函数

下面，我们就来创建在订单中执行计算的函数。

第1步：添加函数，计算总金额
如代码清单2-7所示，从DOM中获取相关字段（quantity、item_total、order_total），在每一个数量字段中建立事件侦听器，只要用户修改了数量值，就能计算出总金额。计算代码并没有放在该代码清单中，本章稍后部分再来添加它。

打开app.js，将代码清单2-7中的代码放到init函数中，紧挨着放在代码行“saveBtn. addEventListener('click', saveForm, false);”后面。

接下来我们看一下HTML5新引入的valueAsNumber属性，它能获取input字段元素值的数字形式。