如何从输入字段中获取数字值？

Question

我在使用 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>

Answer 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 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>

Answer 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

Answer 3

每个id都必须转换为整数。例子

var Malfunctions = parseInt(document.getElementById("Malfunctions").value);

那么你准备好了

Answer 4

对于 HTMLInputElement，您可以使用属性 .valueAsNumber，其中 returns 一个数字属性如果可能的话：

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 />

如何从输入字段中获取数字值？

How to get a number value from an input field?

html

javascript

input-field