How to get a number value from an input field?
html, input-field, javascript
Solution
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>
Problem
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> ```