我对Javascript和这个网站很陌生,但我正在寻找我的一个项目的帮助。
到目前为止,它有点粗糙,还不完整,但在我弄清楚如何真正显示计算结果之前,我无法继续前进。如果我能得到帮助,弄清楚为什么第一个苹果总数不是计算的,那就太好了!
这是我的完整(工作进行中)html页面:
<html>
<head>
<title>Order Form</title>
<style>
.inBox { width:60px; text-align:right; border: 1px solid green; }
.thWide { width:80px; text-align:right; }
</style>
<script type="text/javascript">
function compute()
{
// Pointers to red asterisks
var spnA = document.getElementById("spnA");
var spnP = document.getElementById("spnP");
var spnG = document.getElementById("spnG");
// Assume no errors yet
var message = "";
spnL.style.display = "none";
spnW.style.display = "none";
spnH.style.display = "none";
var apple = form1.txtA.value;
if (apple == "")
apple = 1;
else
apple = parseFloat(apple);
if ( isNaN(apple) )
{
spnA.style.display = "inline";
message = message + "Apple is badn";
form1.txtA.select();
}
var pear = form1.txtP.value;
if (pear == "")
pear = 1;
else
pear = parseFloat(pear);
if ( isNaN(pear) )
{
spnP.style.display = "inline";
message = message + "Pear is badn";
form1.txtP.select();
}
var grape = form1.txtG.value;
if (grape == "")
grape = 1;
else
grape = parseFloat(grape);
if ( isNaN(grape) )
{
spnG.style.display = "inline";
message = message + "Grape is badn";
form1.txtG.select();
}
if ( message != "" )
{
// Show error and clear subA
alert(message);
form1.txtsubA.value = "";
}
else
{
// Compute subA
var subA = length * 5.49;
form1.txtsubA.value = subA;
form1.txtA.select();
}
}
</script>
</head>
<body>
<form id="form1">
<table border="2">
<tr><th colspan="4">Volume Box</th></tr>
<tr><th>Quantity</th><th>Item</th><th>Unit Prics</th><th>Totals</th></tr>
<tr>
<th class="thWide">
<span id="spnA" style="color:red; font-weight:bold; display:none;">*</span>
<input type="text" id="txtA" class="inBox" tabindex="1" autofocus />
</th><td>Apples</td><td>$5.49</td>
<th style="width:80px;"><input type="text" id="txtsubA" class="inBox" readonly /></th>
</tr><tr>
<th class="thWide">
<span id="spnP" style="color:red; font-weight:bold; display:none;">*</span>
<input type="text" id="txtP" class="inBox" tabindex="1" autofocus />
</th><td>Pears</td><td>$6.49</td>
<th style="width:80px;"><input type="text" id="txtsubP" class="inBox" readonly /></th>
</tr><tr>
<th class="thWide">
<span id="spnG" style="color:red; font-weight:bold; display:none;">*</span>
<input type="text" id="txtG" class="inBox" tabindex="1" autofocus />
</th><td>Grapes</td><td>$7.49</td>
<th style="width:80px;"><input type="text" id="txtsubG" class="inBox" readonly /></th>
</tr>
<tr><th colspan="4">
<input type="button" value="Compute" onclick="compute();" tabindex="4" />
</th></tr>
</table>
</form>
</body>
</html>
浏览器中的控制台在诊断任何问题时都非常有用。例如,您的代码在控制台中给出了以下错误:
test.html:18 Uncaught ReferenceError: spnL is not defined
我想你的意思是:
spnL.style.display = "none";
spnW.style.display = "none";
spnH.style.display = "none";
将:
spnA.style.display = "none";
spnP.style.display = "none";
spnG.style.display = "none";
至于你的问题,问题就在这一部分:
// Compute subA
var subA = length * 5.49;
长度在任何地方都没有定义,你的意思可能是:
// Compute subA
var subA = apple * 5.49;
然后你可能还想更改的线路
form1.txtsubA.value = subA;
至
form1.txtsubA.value = subA.toFixed(2);
其将仅显示小数点后2位。
清除(或注释掉):
spnL.style.display = "none";
spnW.style.display = "none";
spnH.style.display = "none";
收集表格中提供的值(添加".value"):
// Pointers to red asterisks
var spnA = document.getElementById("txtA").value;
var spnP = document.getElementById("txtP").value;
var spnG = document.getElementById("txtG").value;
声明值的交换长度:
// Compute subA
var subA = spnA * 5.49;
尽情享受吧!