为什么我没有正确获得总价？ [关闭]答案

【问题标题】：Why I am not getting total price correctly? [closed]为什么我没有正确获得总价？ [关闭]
【发布时间】：2021-06-10 07:30:20
【问题描述】：

根据问题陈述，我们需要输入产品的数量和价格，然后在输出中显示总价它显示 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>```

【问题讨论】：

忘记引号了：document.getElementById('totalprice').innerHTML=res;
document.getElementById('price') => document.getElementById('price').value

标签： javascript html css html5-canvas

【解决方案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 子句中添加返回。

<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>

【讨论】：

谢谢！但我仍然面临同样的问题。还有其他原因吗？
我想我找到了问题！请查看我上面的编辑，并在它帮助您解决问题时将其标记为正确。
感谢在输入数字但获取 'totalprice' 组件值计算错误并且在描述中：“缺少必需的参数 (id)。当网页需要传递参数时会发生此错误从另一个页面（通过帖子或cookie），但它失败了。这有时会发生在用户会话超时，由于不活动，或者当需要该强制参数的URL直接在URL栏中键入或从浏览器调用时书签，例如没有从课程页面中的链接启动的 SCORM 播放器页面。”这就是测试用例失败的原因
虽然结果是正确的，但是结果显示后屏幕消失并显示上述评论。非常感谢您的努力。
我不确定此错误消息，但正如我在回答中提到的那样，结果消失了，因为包含结果的标签被放置在表单本身中。因此，当提交表单时，它将像其他字段一样被重置。您应该考虑将其放在表单之外或按预期使用标记 (w3schools.com/tags/tag_output.asp)。