web-dev-qa-db-fra.com

Comment obtenir une valeur numérique à partir d'un champ de saisie?

J'ai des problèmes avec le calcul de certaines choses avec JS et l'obtention des bonnes valeurs dans les champs de saisie (nombre). Lorsque j'utilise ce code, il ne montre rien. Alors, quel est le problème avec mon JS? Dois-je inclure un fichier 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

Vous avez eu quelques erreurs dans votre HTML, mais voici un JSFiddle qui fonctionne: Fiddle

Vous vous essayez d'obtenir des éléments par leur ID, mais vous ne leur donnez pas d'ID, vous leur donnez un nom. Arrêtez également d'utiliser les appels JavaScript en ligne; c'est une mauvaise pratique.

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

Chaque id doit être converti en entier. Exemple

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

alors vous êtes prêt à partir

4
Japhet Hilario

Vous avez deux problèmes ici. Une évidence est que vous essayez d'obtenir une référence aux entrées du formulaire par id, mais que vous ne leur en avez pas donné (vous leur avez donné un name). Pour résoudre ce problème, modifiez l'attribut name en id, ou utilisez la méthode spécifique au formulaire pour les référencer, par exemple:

var TotalProductionTime = document.forms.frm1.TotalProductionTime

Le deuxième problème est plus vicieux et concerne la portée de l'exécution de ce que vous mettez dans les attributs onclick. Vous voyez, votre bouton est nommé "Calculer" tout comme votre fonction, et dans le contexte de l'attribut onclick, sa forme parent est utilisée pour résoudre les identifiants avant la portée globale. Ainsi, au lieu d'appeler la fonction nommée Calculer, vous essayez d'appeler le bouton lui-même. Corrigez cela en leur donnant des noms différents, en référençant window.Calculate explicitement, ou mieux, définissez votre gestionnaire d'événements en JavaScript au lieu d'utiliser l'attribut HTML:

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