如何从输入字段中获取数字值？
Posted
技术标签:
【中文标题】如何从输入字段中获取数字值？【英文标题】：How to get a number value from an input field? 【发布时间】：2015-04-26 01:34:15 【问题描述】：我在用 JS 计算一些东西并从输入字段（数字）中获取正确的值时遇到了一些问题。当我使用此代码时，它不显示任何内容。那么我的 JS 有什么问题呢？我需要包含一个 jQuery 文件吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<form id="frm1" action="Calculate.html">
<table 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>【问题讨论】：
.value 返回一个字符串。使用parseInt(x, 10) 或parseFloat。
您使用的是getElementById，但您没有设置任何ID。
Get value of <input type="number"> with JS when it contains non-numeric characters的可能重复
您也可以使用.valueAsNumber 来获取数字而不是字符串。
【参考方案1】：
您的 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;
<form id="frm1" action="Calculate.html">
<table 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>【讨论】：
谢谢，你改变了什么？ :x aahhwww nvm 我现在看到了.. 正如 Yerko Palma 提到的那样，没有设置 ID。我的天：x 按钮的name 必须与onclick 函数不同，否则在您的情况下，我会将其(name) 排除在外。此外，如果您希望按 ID 获取元素，请给它们一个 ID 而不是名称。【参考方案2】：
每个 id 都必须转换为整数。示例
var Malfunctions = parseInt(document.getElementById("Malfunctions").value);
那么你准备好了
【讨论】：
这是最好的答案，避免连接而不是加法 请使用parseIntwith the second parameter, 10。考虑改用Number 或parseFloat，或者专门针对<input>s，.valueAsNumber。【参考方案3】：
这里有两个问题。一个明显的问题是，您尝试通过id 获取对表单输入的引用，但没有给他们任何参考（您给了他们name）。要解决此问题，请将name 属性更改为id，或使用特定于表单的方式来引用它们，例如：
var TotalProductionTime = document.forms.frm1.TotalProductionTime
第二个问题更恶毒，与您在onclick 属性中放入的内容的执行范围有关。你看，你的按钮和你的函数一样被命名为“Calculate”，并且在onclick 属性的上下文中，它的父表单用于解析全局范围之前的标识符。因此，您尝试调用按钮本身，而不是调用名为 Calculate 的函数。通过给它们不同的名称、显式引用 window.Calculate 或更好的方法来解决这个问题，在 JavaScript 中定义你的事件处理程序而不是使用 HTML 属性：
document.forms.frm1.Calculate.onclick=Calculate
【讨论】：
【参考方案4】：使用HTMLInputElement，您可以使用属性.valueAsNumber，如果可能，它会返回一个数字属性：
const str = document.querySelector("input").value;
const num = document.querySelector("input").valueAsNumber;
console.log(typeof str, str, str + 2);
console.log(typeof num, num, num + 2);<input type="number" value="40" disabled />【讨论】：
以上是关于如何从输入字段中获取数字值？的主要内容，如果未能解决你的问题，请参考以下文章