我有一个非常简单的表格，它询问一个物品容器的价格，然后还输入另一个容器中物品的数量。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
TA贡献1871条经验 获得超13个赞
我认为主要错误是您试图将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);这样的，因此不会发送任何内容。您需要在您的示例中将其改回。
添加回答
举报
0/150
提交
取消