CODEWITHSUNDEEP
javascripthtmlinput-field
Bart
Bart

Reputation: 767

How to get a number value from an input field?

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?

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

Upvotes: 18

Views: 190039

Answers (4)

VLAZ
VLAZ

Reputation: 29116

With HTMLInputElement you can use property .valueAsNumber which returns a numeric property if possible:

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

Upvotes: 15

Michelangelo
Michelangelo

Reputation: 5958

You had some mistakes in your HTML, but here is a working 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.

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>

Upvotes: 21

Japhet Hilario
Japhet Hilario

Reputation: 197

Every id must be converted to integer. Example

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

then your ready to go

Upvotes: 18

Touffy
Touffy

Reputation: 6561

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 name attribute to an id, or use the form-specific way to reference them, e.g.:

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 onclick attributes. You see, your button is named "Calculate" just like your function, and in the context of the onclick attribute, 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.Calculate explicitly, or much better, define your event handler in JavaScript instead of using the HTML attribute:

document.forms.frm1.Calculate.onclick=Calculate

Upvotes: 2

Related Questions