J'apprends le javascript. Essayez de faire une calculatrice simple en utilisant DOM. J'ai écrit le script ci-dessous, mais mon script donne une erreur. TypeError non capturé: impossible de lire la propriété 'value' de null calculator.html: 8

Voici mon script:

    <!DOCTYPE html>
<html>
<head>
    <title>My Calculator</title>
</head>
<body>
    <script type="text/javascript">
        var f_number = document.getElementById("f_number").value;
        var f_number = document.getElementById("s_number").value;

        function calculate(opa)
        {
            if(opa=='+') 
            {
                var result = Number(f_number) + Number(s_number);
            }
            if(opa=='-') 
            {
                var result = f_number - s_number;
            }
            if(opa=='*') 
            {
                var result = f_number * s_number;
            }
            if(opa=='/') 
            {
                var result = f_number / s_number;
            }
            return document.getElementById('res').value = result;
        }
    </script>
    <div class="container">
        <table>
            <tr>
                <td>First Number</td>
                <td><input type="number" id="f_number" ></td>
            </tr>
            <tr>
                <td>Second Number</td>
                <td><input type="number" id="s_number" ></td>
            </tr>
            <tr>
                <td></td>
                <td>
                <input type="submit" value="+" onclick="calculate()" >
                <input type="submit" value="-" onclick="calculate()" >
                <input type="submit" value="*" onclick="calculate()" >
                <input type="submit" value="/" onclick="calculate()" >
                </td>
            </tr>
            <tr>
                <td>Result</td>
                <td><input type="text" id="res"></td>
            </tr>
        </table>
    </div>
</body>
</html>
0
Nishan Singha 7 mars 2016 à 19:39

3 réponses

Meilleure réponse

Exemple complet de code de travail:

<!DOCTYPE html>
<html>
<head>
    <title>My Calculator</title>
</head>
<body>
    <div class="container">
        <table>
            <tr>
                <td>First Number</td>
                <td><input type="number" id="f_number" ></td>
            </tr>
            <tr>
                <td>Second Number</td>
                <td><input type="number" id="s_number" ></td>
            </tr>
            <tr>
                <td></td>
                <td>
                <input type="submit" value="+" onclick="calculate('+')" >
                <input type="submit" value="-" onclick="calculate('-')" >
                <input type="submit" value="*" onclick="calculate('*')" >
                <input type="submit" value="/" onclick="calculate('/')" >
                </td>
            </tr>
            <tr>
                <td>Result</td>
                <td><input type="text" id="res"></td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        function calculate(opa)
        {
            var f_number = +document.getElementById("f_number").value;
            var s_number = +document.getElementById("s_number").value;
            if(opa=='+')
            {
                var result = f_number + s_number;
            }
            if(opa=='-')
            {
                var result = f_number - s_number;
            }
            if(opa=='*')
            {
                var result = f_number * s_number;
            }
            if(opa=='/')
            {
                var result = f_number / s_number;
            }
            return document.getElementById('res').value = result;
        }
    </script>
</body>
</html>
1
Dmitriy 7 mars 2016 à 16:59

Cela signifie qu'il n'y a aucune valeur pour ces éléments:

 var f_number = document.getElementById("f_number").value;
 var f_number = document.getElementById("s_number").value;

Vous devez exécuter le script une fois qu'une valeur est présente / le bouton est cliqué plutôt que tout de suite.

0
ltalhouarne 7 mars 2016 à 16:42

JavaScript est exécuté dans l'ordre où il est rencontré.

Lorsque vous faites document.getElementById("f_number").value ce nœud DOM n'existe pas encore. Il renvoie donc null, d'où le message d'erreur.

Déplacez votre code sous les définitions de nœuds DOM référencées ou exécutez votre code sur le document prêt ou onload.

1
Halcyon 7 mars 2016 à 16:43