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

Bar*_*art 9 html javascript input-field

我有一些问题,用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>
Run Code Online (Sandbox Code Playgroud)

VLA*_*LAZ 15

如果可能的话,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);
Run Code Online (Sandbox Code Playgroud)
<input type="number" value="40" disabled />
Run Code Online (Sandbox Code Playgroud)


Mic*_*elo 13

你的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;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)


小智 11

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

var Malfunctions = parseInt(document.getElementById("Malfunctions").value);
Run Code Online (Sandbox Code Playgroud)

然后你准备好了

  • 请使用“parseInt”[_with_第二个参数“10”](/sf/ask/1181622921/)。考虑使用 [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#Function_syntax) 或 [`parseFloat`](https://developer.mozilla .org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) 相反,或者,专门针对“&lt;input&gt;”,[`.valueAsNumber`](https://developer.mozilla.org/en -US/docs/Web/API/HTMLInputElement#Properties)。 (2认同)