Javascript 如何从输入字段中获取数字值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28695617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get a number value from an input field?
提问by Bart
I have some issues with calculating some stuff with JS and getting the right values out of the input fields (number). When I use this code it doesn't show anything. So what is wrong with my JS? Do I need to include a jQuery file?
我在用 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>回答by Michelangelo
You had some mistakes in your HTML, but here is a working JSFiddle: Fiddle
您的 HTML 中有一些错误，但这里有一个有效的 JSFiddle：Fiddle
You you are trying to get elements by their ID, but you don't give them an ID you give them a Name. Also, stop using inline JavaScript calls; it is bad practice.
你试图通过它们的 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;
}<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>回答by Japhet Hilario
Every id must be converted to integer. Example
每个 id 都必须转换为整数。例子
var Malfunctions = parseInt(document.getElementById("Malfunctions").value);
then your ready to go
然后你准备好了
回答by Touffy
You've got two problems here. One obvious is that you try to get a reference to the form inputs by id, but didn't give them any (you gave them a name). To fix, either change the nameattribute to an id, or use the form-specific way to reference them, e.g.:
你这里有两个问题。一个明显的原因是您试图通过 获得对表单输入的引用id，但没有给它们任何（您给了它们name）。要修复，请将name属性更改为 an id，或使用特定于表单的方式来引用它们，例如：
var TotalProductionTime = document.forms.frm1.TotalProductionTime
Second problem is more vicious and has to do with the scope of execution of what you put in onclickattributes. You see, your button is named "Calculate" just like your function, and in the context of the onclickattribute, its parent form is used to resolve identifiers before the global scope. So instead of calling the function named Calculate, you're trying to call the button itself. Fix that by giving them different names, referencing window.Calculateexplicitly, or much better, define your event handler in JavaScript instead of using the HTML attribute:
第二个问题更严重，与您放入onclick属性的执行范围有关。你看，你的按钮就像你的函数一样被命名为“计算”，在onclick属性的上下文中，它的父表单用于在全局范围之前解析标识符。因此，您不是调用名为 Calculate 的函数，而是尝试调用按钮本身。通过给它们不同的名称、window.Calculate显式引用或更好的方法来解决这个问题，在 JavaScript 中定义您的事件处理程序，而不是使用 HTML 属性：
document.forms.frm1.Calculate.onclick=Calculate
