web-dev-qa-db-ja.com

入力フィールドから数値を取得する方法は？

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>
javascripthtmlinput-field
9
Bart

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>
12
Michelangelo

すべてのIDは整数に変換する必要があります。例

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

その後、あなたの準備ができて

4
Japhet Hilario

ここには2つの問題があります。明らかなことの1つは、idによってフォーム入力への参照を取得しようとしましたが、何も提供しなかったことです（nameを提供しました）。修正するには、name属性をidに変更するか、フォーム固有の方法を使用してそれらを参照します。例：

var TotalProductionTime = document.forms.frm1.TotalProductionTime

2番目の問題はより悪質で、onclick属性に入れたものの実行範囲に関係しています。ご覧のとおり、ボタンには関数と同じように「計算」という名前が付けられ、onclick属性のコンテキストでは、その親フォームがグローバルスコープの前に識別子を解決するために使用されます。したがって、Calculateという名前の関数を呼び出す代わりに、ボタン自体を呼び出そうとしています。異なる名前を付けてwindow.Calculateを明示的に参照するか、はるかに優れた方法で、HTML属性を使用する代わりにJavaScriptでイベントハンドラーを定義することで修正します。

document.forms.frm1.Calculate.onclick=Calculate
2
Touffy