我在使用JS计算一些东西并从输入字段(数字)中获取正确的值时遇到了一些问题。当我使用此代码时,它不会显示任何内容。那我的JS出了什么问题?我是否需要包含jQuery文件?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<form id="frm1" action="Calculate.html">
<table width="350px" border="1px">
<tr>
<th colspan="2">Availability</th>
</tr>
<tr>
<td>Total Production Time</td>
<td><input type="number" name="TotalProductionTime" placeholder=""> hours</td>
</tr>
<tr>
<td>Breaks</td>
<td><input type="number" name="Breaks" placeholder=""> minutes</td>
</tr>
<tr>
<td>Malfunctions</td>
<td><input type="number" name="Malfunctions" placeholder=""> minutes</td>
</tr>
<tr>
<td>Theoretical production time:</td>
<td><p id="test"></p></td>
</tr>
</table>
<input type="button" onclick="Calculate()" name="Calculate" value="calculate">
<script>
function Calculate()
{
var TotalProductionTime = document.getElementById("TotalProductionTime").value;
var TotalProductionTimeInMinutes = TotalProductionTime * 60;
var Breaks = document.getElementById("Breaks").value;
var Malfunctions = document.getElementById("Malfunctions").value;
var TheoreticalProductionTime = TotalProductionTimeInMinutes - Breaks - Malfunctions;
document.getElementById("test").innerHTML = TheoreticalProductionTime;
}
</script>
</body>
</html>
答案 0 :(得分:12)
你的HTML中有一些错误,但这是一个有效的JSFiddle:Fiddle
您试图通过他们的ID获取元素,但是您没有给他们一个ID,而是给他们一个名字。此外,停止使用内联JavaScript调用;这是不好的做法。
function Calculate() {
var TotalProductionTime = document.getElementById("TotalProductionTime").value;
var TotalProductionTimeInMinutes = TotalProductionTime * 60;
var Breaks = document.getElementById("Breaks").value;
var Malfunctions = document.getElementById("Malfunctions").value;
var TheoreticalProductionTime = TotalProductionTimeInMinutes - Breaks - Malfunctions;
document.getElementById("test").innerHTML = TheoreticalProductionTime;
}
&#13;
<form id="frm1" action="Calculate.html">
<table width="350px" border="1px">
<tr>
<th colspan="2">Availability</th>
</tr>
<tr>
<td>Total Production Time</td>
<td>
<input type="number" id="TotalProductionTime" placeholder="">hours</td>
</tr>
<tr>
<td>Breaks</td>
<td>
<input type="number" id="Breaks" placeholder="">minutes</td>
</tr>
<tr>
<td>Malfunctions</td>
<td>
<input type="number" id="Malfunctions" placeholder="">minutes</td>
</tr>
<tr>
<td>Theoretical production time:</td>
<td>
<p id="test"></p>
</td>
</tr>
</table>
<input type="button" onclick="Calculate()" value="calculate">
</form>
&#13;
答案 1 :(得分:3)
每个id必须转换为整数。实施例
var Malfunctions = parseInt(document.getElementById("Malfunctions").value);
然后你准备好了
答案 2 :(得分:2)
这里有两个问题。一个显而易见的是,您尝试通过id
获取对表单输入的引用,但没有给它们任何(您给了它们name
)。要解决此问题,请将name
属性更改为id
,或使用特定于表单的方式引用它们,例如:
var TotalProductionTime = document.forms.frm1.TotalProductionTime
第二个问题更加恶毒,与您在onclick
属性中的执行范围有关。您可以看到,您的按钮名称为“Calculate”,就像您的函数一样,在onclick
属性的上下文中,其父窗体用于在全局范围之前解析标识符。因此,您不是调用名为Calculate的函数,而是尝试调用按钮本身。通过为它们提供不同的名称,明确地引用window.Calculate
或更好地修复它,在JavaScript中定义您的事件处理程序而不是使用HTML属性:
document.forms.frm1.Calculate.onclick=Calculate