How to get a number value from an input field?

Question

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>

`.value` returns a string. Use `parseInt(x, 10)` or `parseFloat`. — Daniel A. White, Feb 24 '15 at 12:23
possible duplicate of [Get value of with JS when it contains non-numeric characters](http://stackoverflow.com/questions/15627341/get-value-of-input-type-number-with-js-when-it-contains-non-numeric-characte) — , Feb 24 '15 at 12:42
You can also use `.valueAsNumber` to get a number instead of a string. — Stack Overflown, Aug 13 '21 at 21:12

score 19 · Accepted Answer · edited Aug 23 '18 at 17:04

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>

Thanks, what did you change? :x aahhwww nvm I see it now.. No ID's set just as Yerko Palma mentioned. My god :x — Bart, Feb 24 '15 at 12:31
The `name` of the button has to differ from the `onclick` function or in your case I would leave it (`name`) out. Also if you want the elements by ID, give them an ID and not a name. — Michelangelo, Feb 24 '15 at 12:38

score 15 · Answer 2 · edited Oct 10 '17 at 06:03

15

Every id must be converted to integer. Example

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

then your ready to go

edited Oct 10 '17 at 06:03

clemens

16,716
11
50
65

answered Oct 10 '17 at 05:47

Japhet Hilario

167
1
3

1

This is the best answer, for avoiding a concatenate instead of addition – IgniteCoders Dec 17 '19 at 05:29
2

Please use `parseInt` [_with_ the second parameter, `10`](https://stackoverflow.com/q/16880327/4642212). Consider using [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#Function_syntax) or [`parseFloat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) instead, or, specifically for ``s, [`.valueAsNumber`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties). – Sebastian Simon Apr 09 '21 at 12:31

score 13 · Answer 3 · answered Nov 23 '21 at 14:06

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

score 2 · Answer 4 · answered Feb 24 '15 at 12:39

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

How to get a number value from an input field?

4 Answers4

Linked

Related