如何在 javascript 计算后的表单输入中摆脱弹出窗口“请选择一个有效值。两个最接近的有效值是
我有一个非常简单的表格，它询问一个物品容器的价格，然后还输入另一个容器中物品的数量。javascript 简单地将单个项目的总数除以价格以获得“每单位”成本。该脚本有效，但每次我运行它时，它都会在价格输入框中弹出一个通知“请选择一个有效值。两个最接近的有效值是...”，因为价格输入是小数。
如果我在 HTML 中编辑价格的输入行并添加“step="0.01"，那么脚本不会输出任何内容。
奇怪的是，我在输出框中添加了“step="any""，它起作用了，因为我在输出框中也得到了相同的弹出窗口。我绝对想要单位成本输出中的大小数位。
这是 HTML（它使用 CSS Grid 设置样式，所以一切都按照我想要的方式定位）：
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<title>Unit Cost Calculator</title>
</head>
<body>
<div class="contain">
<div class="wrapper">
<div class="form">
<h2>Unit Cost Calculator</h3>
<form id="unitCost" action="">
<p>
<label for="itemdesc">Item Description</label>
<input id="itemdesc" name="itemdesc" type="text" />
</p>
<p>
<label for="price">Price</label>
<input id="price" name="price" type="number" />
</p>
<p>
<label for="quantity">Qty.</label>
<input id="quantity" name="quantity" type="number" />
</p>
<p>
<label for="unit">Unit Cost</label>
<input id="unit" name="unit" type="number" step="any" />
</p>
<p>
<label for="singleUnitCost">Single Unit Cost</label>
<input id="singleUnitCost" name="singleUnitCost" type="number" />
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
<label for="subm"></label>
<input type="submit" value="Calculate Per Unit Cost" onclick="units()" />
</p>
<p>
<label for="rest"></label>
<input type="reset" value="Reset" />
</p>
</form>
</div>
</div>
</div>
另外，在脚本中，我想将价格乘以 0.06（这是 6% 的销售税率），再将价格加回去，这样我实际上得到的是加税后的价格，但是当我这样做时“myResult”代码行的数学运算如下：
var myResult=(pric*0.06+pric)/qty;
然后脚本根本不起作用。
啊。我很快就学会了 javascript 数学和形式令人沮丧。
白猪掌柜的1回答
-
慕桂英4014372
我认为主要错误是您试图将values 直接用作数字。如果将它们设置为实际数字，一切都会按预期进行。通常，您希望价格保留两位小数：function units() { var pric=Number(document.getElementById('price').value); var qty=Number(document.getElementById('quantity').value); var result=document.getElementById('unit'); debugger; var myResult=(pric*0.06+pric)/qty; document.getElementById('unit').value=myResult;}<div class="contain"> <div class="wrapper"> <div class="form"> <h2>Unit Cost Calculator</h3> <form id="unitCost" action="javascript:void(0);"> <p> <label for="itemdesc">Item Description</label> <input id="itemdesc" name="itemdesc" type="text" /> </p> <p> <label for="price">Price</label> <input id="price" name="price" type="number" step="0.01"/> </p> <p> <label for="quantity">Qty.</label> <input id="quantity" name="quantity" type="number" /> </p> <p> <label for="unit">Unit Cost</label> <input id="unit" name="unit" type="number" step="any" /> </p> <p> <label for="singleUnitCost">Single Unit Cost</label> <input id="singleUnitCost" name="singleUnitCost" type="number" /> </p> <p> </p> <p> </p> <p> </p> <p> <label for="subm"></label> <input type="submit" value="Calculate Per Unit Cost" onclick="units()" /> </p> <p> <label for="rest"></label> <input type="reset" value="Reset" /> </p> </form> </div> </div></div>主要的变化是pric和qty在Number函数内部。另外，请注意表格的action是javascript:void(0);这样的，因此不会发送任何内容。您需要在您的示例中将其改回。
随时随地看视频慕课网APP
相关分类
JavaScript