Javascript计费功能

Question

这是我最近遇到的一个问题。网页中有一个 from，用户可以输入"单价"和"数量"的值。当用户点击"查找金额"按钮时，总数将显示在文本字段"金额"中。函数 "calAmount" 根据公式计算总金额：金额 = 单价*数量。但是我在编写这个"calAmount"函数时遇到了问题。有人可以帮助我吗？

<form name = "order" method = "POST">
        <p>Unit price :
        <input type = "text" name = "unitPrice" maxlength = "9" /></p>
        <p>Quantity &nbsp: 
        <input type = "text" name = "quantity" maxlength = "5"/></p>
        <p>Amount: &nbsp:
        <input type = "text" name = "amount" maxlength = "12"></p>
        <input name = "btnCal" type = "button" id = "btnCal" value = "Find amount" onclick="calAmount()"/>
        <br/><br/>
    </form>

Answer 1

• 使用带有name属性的querySelector来选择元素。
• 访问元素value属性。
• 使用Number()将value转换为Number

function calAmount() {
  var unitPrice = document.querySelector('[name="unitPrice"]');
  var quantity = document.querySelector('[name="quantity"]');
  var amount = document.querySelector('[name="amount"]');
  amount.value = Number(unitPrice.value) * Number(quantity.value);
}

<form name="order" method="POST">
  <p>Unit price :
    <input type="text" name="unitPrice" maxlength="9" />
  </p>
  <p>Quantity &nbsp:
    <input type="text" name="quantity" maxlength="5" />
  </p>
  <p>Amount: &nbsp:
    <input type="text" name="amount" maxlength="12">
  </p>
  <input name="btnCal" type="button" id="btnCal" value="Find amount" onclick="calAmount()" />
  <br/>
  <br/>
</form>

Answer 2

你的calAmount()函数应该是这样的

function calAmount() {
  var unitPrice = document.getElementById('unitPrice').value;
  var quantity = document.getElementById('quantity').value;
  document.getElementById('amount').value = unitPrice * quantity;
}

<form name="order" method="POST">
  <p>Unit price :
    <input type="text" name="unitPrice" id="unitPrice" maxlength="9" />
  </p>
  <p>Quantity &nbsp:
    <input type="text" name="quantity" id="quantity" maxlength="5" />
  </p>
  <p>Amount: &nbsp:
    <input type="text" name="amount" id="amount" maxlength="12">
  </p>
  <input name="btnCal" type="button" id="btnCal" value="Find amount" onclick="calAmount()" />
  <br/>
  <br/>
</form>