problème erreur de type/erreur de fonction

a marqué ce sujet comme résolu.

Bonjour, petit programme html avec javascript pour récupérer des valeurs saisies dans un formulaire et faire des opérations. Le problème est le suivant : Uncaught TypeError: addition is not a function. Je ne comprends pas l’erreur de type dans ce cas la.

Voici le fichier HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>TP2 Javascript</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device_width, initial-scale=1, user-scalable=no">
        <link rel="stylesheet" type="text/css" href="">
        <script src="addition.js"></script>
    </head>

    <body>
        <h1>Exercice 1</h1>
        <h3>Partie 2</h3>
        <!--<form name="form2">
            <p>Nom :</p><input type="text" name="nom" value=""><br>
            <input type="button" name="button" value="afficher" onclick="addition(form2)">
            <p>Bonjour</p><input type="text" name="output2" value=""><br>
        </form> -->

        <form name="exercice">
            <label for="error">Premier nombre : </label><input type="text" name="premier" id="error"><br>
            <label for="error2">Second nombre : </label><input type="text" name="second" id="error2"><br><br>

            <input type="button" name="addition" value="Addition" onClick="addition(exercice)">
            <label for="error3">: </label><input type="text" name="output1" id="error3" value=""><br><br>

            <input type="button" name="soustraction" value="Soustraction" onClick="soustraction(exercice)">
            <label for="error4">: </label><input type="text" name="output2" id="error4" value=""><br><br>

            <input type="button" name="multiplication" value="Multiplication" onClick="multiplication(exercice)">
            <label for="error5">: </label><input type="text" name="output3" id="error5" value=""><br><br>

            <input type="button" name="division" value="Division" onClick="division(exercice)">
            <label for="error6">: </label><input type="text" name="output4" id="error6" value=""><br><br>
        </form>

    </body>
</html>

Et voici le fichier JS :

function addition(exercice){
    var add = document.exercice.premier.value;
    var add2 = document.exercice.second.value;
    document.exercice.output1.value = add + add2;
}

function soustraction(exercice){
    var add = document.exercice.premier.value;
    var add2 = document.exercice.second.value;
    document.exercice.output2.value = add - add2;
}

function multiplication(exercice){
    var add = document.exercice.premier.value;
    var add2 = document.exercice.second.value;
    document.exercice.output3.value = add * add2;
}

function division(exercice){
    var add = document.exercice.premier.value;
    var add2 = document.exercice.second.value;
    document.exercice.output4.value = add / add2;
}
/*function addition(form2){
    var nom = document.form2.nom.value;
    document.form2.output2.value = nom;
}*/

Si quelqu’un pourrait m’aider ça serait vraiment gentil. Merci d’avance

+0 -0

Bonjour, je suis autant surpris que toi … en principe on ne met pas de onClick c’est sale (sauf quand on utilise des frameworks JS). La bonne pratique c’est d’utiliser monElemHtml.addEventListener('click', function () { }); ou avec la méthode on de jQuery. Ma surprise c’est de me rendre compte que tous les champs avec l’attribut name sont directement accessibles dans le onClick ce qui explique que quand tu écris onClick="addition(exercice)", addition correspond à ton champ addition et pas à ta fonction. Après je n’aurais certainement pas codé ça comme ça … mais ça marche (et j’ai un peu la flemme), je te laisse renommer tes fonctions et/ou tes champs. :)

+0 -0

Bonjour, je suis autant surpris que toi … en principe on ne met pas de onClick c’est sale (sauf quand on utilise des frameworks JS).

Yarflam

Non non, même quand on utilise un framework on ne le fait pas : on utilise la syntaxe du framework pour appliquer un listener proprement.

Autrement, en plus d’utiliser addEventListener pour avoir un code propre, je recommanderais de charger le JS en fin de HTML et non au début pour ne pas bloquer l’affichage de la page en cas d’erreur ou de lenteur/problème de chargement du JS.

Pour éviter les conflits tu pourrais aussi accéder à ton formulaire en utilisant document.forms.nomduformulaire plutôt que directement document.nomduformulaire. Sache aussi que plusieurs éléments peuvent porter le même attribut name dans un document valide, contrairement à id. Il faut donc faire attention quand tu accèdes à un élément par son name : tu ne récupères ainsi que le premier.

Pour afficher des valeur calculées, il existe en HTML5 une balise <output> au lieu d’un <input> qui pourrait être mal interprété par un lecteur d’écran ;)

+0 -0

Bonjour, je suis autant surpris que toi … en principe on ne met pas de onClick c’est sale (sauf quand on utilise des frameworks JS).

Yarflam

Non non, même quand on utilise un framework on ne le fait pas : on utilise la syntaxe du framework pour appliquer un listener proprement.

viki53

Oui en effet. C’est juste que j’utilise React et que ça utilise nativement onClick. ;) mais c’est bien de le préciser en effet.

+0 -0

Salut, peut-être faut-il convertir les valeurs en nombre ?
Le type est une chaîne de caractère, utilise Number() pour convertir :


/*
'exercice' passé en paramètre n'est pas utilisé,
puisqu'il se trouve dans l'objet document
*/

function addition() {
    var add = Number(document.exercice.premier.value);
    var add2 = Number(document.exercice.second.value);

    // Pas besoin de Number ici car add et add2 sont déjà des nombres
    document.exercice.output1.value = add + add2;
}

Je te laisse appliquer cette idée pour les autres fonctions ! :)

+0 -0

Salut, merci pour la réponse green mais cela ne change rien. Il n’y a toujours aucune réaction lors du clic. Pour les autres réponses merci quand même mais je reste débutant en JS et je ne vais pas commencer à utiliser des choses que je n’ai pas apprises et que j’ai plus de mal à comprendre.

+0 -0

Eurêka, j’ai trouvé ! :)

Il s’agit d’un conflit de noms : renomme ta fonction addition en additionZ par exemple.

Ces codes fonctionnent chez moi, pour l’addition en tout cas :

<!DOCTYPE html>
<html>
    <head>
        <title>TP2 Javascript</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device_width, initial-scale=1, user-scalable=no">
        <link rel="stylesheet" type="text/css" href="">
        <script src="addition.js"></script>
    </head>

    <body>
        <h1>Exercice 1</h1>
        <h3>Partie 2</h3>
        <!--<form name="form2">
            <p>Nom :</p><input type="text" name="nom" value=""><br>
            <input type="button" name="button" value="afficher" onclick="addition(form2)">
            <p>Bonjour</p><input type="text" name="output2" value=""><br>
        </form> -->

        <form name="exercice">
            <label for="error">Premier nombre : </label><input type="text" name="premier" id="error"><br>
            <label for="error2">Second nombre : </label><input type="text" name="second" id="error2"><br><br>

            <input type="button" name="addition" value="Addition" onclick="additionZ()">
            <label for="error3">: </label><input type="text" name="output1" id="error3" value=""><br><br>

            <input type="button" name="soustraction" value="Soustraction" onClick="soustraction(exercice)">
            <label for="error4">: </label><input type="text" name="output2" id="error4" value=""><br><br>

            <input type="button" name="multiplication" value="Multiplication" onClick="multiplication(exercice)">
            <label for="error5">: </label><input type="text" name="output3" id="error5" value=""><br><br>

            <input type="button" name="division" value="Division" onClick="division(exercice)">
            <label for="error6">: </label><input type="text" name="output4" id="error6" value=""><br><br>
        </form>

    </body>
</html>

Et le JS :

function additionZ(){
    var add = Number(document.exercice.premier.value);
    var add2 = Number(document.exercice.second.value);
    document.exercice.output1.value = add + add2;
}

function soustraction(exercice){
    var add = document.exercice.premier.value;
    var add2 = document.exercice.second.value;
    document.exercice.output2.value = add - add2;
}

function multiplication(exercice){
    var add = document.exercice.premier.value;
    var add2 = document.exercice.second.value;
    document.exercice.output3.value = add * add2;
}

function division(exercice){
    var add = document.exercice.premier.value;
    var add2 = document.exercice.second.value;
    document.exercice.output4.value = add / add2;
}
/*function addition(form2){
    var nom = document.form2.nom.value;
    document.form2.output2.value = nom;
}*/
+0 -0

Pour les autres réponses merci quand même mais je reste débutant en JS et je ne vais pas commencer à utiliser des choses que je n’ai pas apprises et que j’ai plus de mal à comprendre.

kevin.moreau802

L’idée n’est pas d’apprendre de nouvelles choses mais plutôt d’éviter d’apprendre de mauvais pratiques en y préférant les bonnes ;)

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte