为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用 Javascript 将不同输入的值相乘以获得总计?

如何使用 Javascript 将不同输入的值相乘以获得总计?

慕哥6287543 2022-09-23 16:14:38

我正在尝试做一个购物车,我希望在输入数量后自动更改总计(总计是价格乘以数量)。我正在尝试使用Javascript来实现这一点,我似乎无法得到它,因为它正在提出空值,并且在它说NaN之前。


PS:目前它是一个控制台日志,只是为了看看它是否有效,但我需要它进入总输入标签。


网页:


<input id="price" type="text" readonly value="$18.95">

<input id="quantity" type="text" value="1" onchange="calcTotal()">

<input id="total" type="text" readonly value="$18.95">

脚本:


function calcTotal() {

  var price = document.getElementById("price").value;

  var quantity = document.getElementById("quantity").value;

  var total = price * quantity;

  console.log(total);

}


查看完整描述

2 回答

?
回首忆惘然

TA贡献1529条经验 获得超10个赞

试试这个:


function calcTotal() {

// remove $ sign and parse Float price

  var price = parseFloat(document.getElementById("price").value.substr(1));

 // parse float quantity

  var quantity = parseFloat(document.getElementById("quantity").value);

  var total = price * quantity;

  //pass calculated value to input with id total

  document.getElementById("total").value = "$" + total;

}

<input id="price" type="text" readonly value="$18.95">

<input id="quantity" type="text" value="1" onchange="calcTotal()">

<input id="total" type="text" readonly value="">


查看完整回答
反对 回复 3天前
?
白板的微信

TA贡献1532条经验 获得超3个赞

任何涉及字符串的操作都会返回 ,但是您应该强制输入值NaNNumber


function calcTotal() {

  var price = document.getElementById("price").value;

  var quantity = document.getElementById("quantity").value;

  var total =Number(price) * Number(quantity);

  console.log(total);

}

使用数字与解析浮动


因此,只要您有标准的数字输入,就没有区别。但是,如果您的输入以数字开头,然后包含其他字符,parseFloat 会将数字从字符串中截断,而数字则给出 NaN(不是数字):


parseFloat('1x'); // => 1

Number('1x'); // => NaN


查看完整回答
反对 回复 3天前
  • 2 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信