How to get a number value from an input field?

Asked 24/2, 2015 at 12:18 Answered 23/11, 2021 at 14:6

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>

Overtax answered 24/2, 2015 at 12:18 Comment(4)

.value returns a string. Use parseInt(x, 10) or parseFloat. – Anticipation 24/2, 2015 at 12:23

you are using getElementById and you haven't any ID set. – Habitue 24/2, 2015 at 12:26

possible duplicate of Get value of <input type="number"> with JS when it contains non-numeric characters – Winifield 24/2, 2015 at 12:42

You can also use .valueAsNumber to get a number instead of a string. – Commodore 13/8, 2021 at 21:12

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>

Hartzell answered 24/2, 2015 at 12:26 Comment(2)

Thanks, what did you change? :x aahhwww nvm I see it now.. No ID's set just as Yerko Palma mentioned. My god :x – Overtax 24/2, 2015 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. – Hartzell 24/2, 2015 at 12:38

Every id must be converted to integer. Example

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

then your ready to go

Sinclare answered 10/10, 2017 at 5:47 Comment(2)

This is the best answer, for avoiding a concatenate instead of addition – Wigwam 17/12, 2019 at 5:29

Please use parseInt with the second parameter, 10. Consider using Number or parseFloat instead, or, specifically for <input>s, .valueAsNumber. – Mannerless 9/4, 2021 at 12:31

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

Laryngoscope answered 23/11, 2021 at 14:6 Comment(0)

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

Paquin answered 24/2, 2015 at 12:39 Comment(0)

Recommended topics

Hot tags