为什么我没有正确获得总价？

Question

根据问题陈述，我们需要输入产品的数量和价格，然后在输出中显示总价它显示 Parameter(id) 缺失且总价值错误没有显示结果的可能原因是什么

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="billcalc.css">
        <script type = "text/javascript">
         function calculateTotalPrice()
         {   pric=parseFloat(document.getElementById("price"));
             qt=parseInt(document.getElementById("qty"));
        
             res=pric*qt;
             
            document.getElementById(totalprice).innerHTML=res;
            return false;
         }
        </script> 
    </head>
    <h1>Bill Calculator</h1>
    <form onsubmit="calculateTotalPrice()">
    <table>
        <tr>
            <td><label for="productName">Product Name</label></td>
            <td><input type="text" placeholder="Product Name" id="productName" name="productName" required></td>
        </tr>
        <tr>
            <td><label for="price">Product Price in Rs.</label></td>
            <td><input type="number" placeholder="Product Price" id="price" min="0" required/></td>
        </tr>
        <tr>
            <td><label>Quantity</label></td>
            <td><input type="number" placeholder="Enter Quantity" id="qty" min="1" required></td>
        </tr>
        <tr>
            <td><label for="totalprice">Total Price in Rs.</label></td>
            <td><output type="number" id="totalprice" for="price qty"  required>
                
                
            </output></td>
            
        </tr>
        <tr>
            <td colspan="2"><input type="submit" id="submit" ></td>
        </tr>
    </table>
    </form>
   
      
    
    
    
</html>```

Answer 1

我认为问题可能是您在以下行中缺少 totalvalue 周围的引号：

document.getElementById(totalprice).innerHTML=res;

应该是：

document.getElementById("totalprice").innerHTML=res;

编辑：目前您正在尝试将 Html 节点解析为数字。您必须使用节点的value。

 pric = parseFloat(document.getElementById("price").value);
 qt = parseInt(document.getElementById("qty").value);

 res = pric * qt;
 document.getElementById("totalprice").innerHTML = res;
 return false;

备注：由于您将结果放在表单本身中，因此会在提交表单后立即处理。您可能需要考虑将其放在表格之外。

编辑 2：如果你想坚持你目前的结构。您需要删除提交按钮的 id 并在 onsubmit 子句中添加 return。

<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="billcalc.css" />
    <script type="text/javascript">
      function calculateTotalPrice() {
        pric = parseFloat(document.getElementById("price").value);
        qt = parseInt(document.getElementById("qty").value);

        res = pric * qt;

        document.getElementById("totalprice").innerHTML = res;
        return false;
      }
    </script>
  </head>
  <h1>Bill Calculator</h1>
  <form id="bill_from" onsubmit="return calculateTotalPrice();">
    <table>
      <tr>
        <td><label for="productName">Product Name</label></td>
        <td>
          <input
            type="text"
            placeholder="Product Name"
            id="productName"
            name="productName"
            required
          />
        </td>
      </tr>
      <tr>
        <td><label for="price">Product Price in Rs.</label></td>
        <td>
          <input
            type="number"
            placeholder="Product Price"
            id="price"
            min="0"
            required
          />
        </td>
      </tr>
      <tr>
        <td><label>Quantity</label></td>
        <td>
          <input
            type="number"
            placeholder="Enter Quantity"
            id="qty"
            min="1"
            required
          />
        </td>
      </tr>
      <tr>
        <td><label for="totalprice">Total Price in Rs.</label></td>
        <td>
          <output
            type="number"
            id="totalprice"
            for="price qty"
            required
          ></output>
        </td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" /></td>
      </tr>
    </table>
  </form>
</html>

为什么我没有正确获得总价？

Why I am not getting total price correctly?

html

javascript

css

html5-canvas