syntaxe function javascript à plusieurs variables

**Eliphorio** · 16/03/2019, 14h02

Bonjour à tous,

Je commence en m'excusant si certaines ''règles'' du forum ne sont pas respectées, c'est ma première fois ici.

Je suis débutant en développement, et j'essaie de développer un site (html, css, js) qui s'apparenterait à un tableur. J'ai donc créer mon tableau tr td et j'ai mis des input avec des id, et des affichages simple. j'ai aussi créer un script javascript afin d'afficher dans la dernière case id="résultat" la division de la première case id="dividende" par la deuxième id="diviseur".
mon problème est le suivant : je ne sais pas d'où vient mon erreur...
le script se déclenche quand je quitte la zone de saisie, mais ça ne se passe pas comme je l'attendais. Problème de " " ou de , je ne sais pas, et j'espère trouver la solution auprès de vous.

mon tableau :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
      <tr>
             <td><input id="dividende_1" type="number"></td>
             <td><input id="diviseur_1" type="number" onchange="benef(dividende_1, diviseur_1, resultat_1);"> </td>
             <td id="resultat_1"></td>
      </tr>

mon script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
      function benef(dividende, diviseur, resultat) {
            var dividende = document.getElementById(dividende) ;
            var diviseur = document.getElementById(diviseur) ;
            var resultat = document.getElementById(resultat) ;
            resultat.innerHTML = dividende/diviseur ;
      }

Merci à vous pour votre aide

**Watilin** · 16/03/2019, 15h32

Envoyé par Eliphorio

je ne sais pas d'où vient mon erreur...

Il faut utiliser la console F12 et apprendre à lire les messages d’erreur.

Problème de " "

Oui, et ça arrive souvent quand on met des attributs onchange, onclick etc.
C’est une bonne pratique de ne pas mettre du tout de JS dans le code HTML. À la place on utilise ce qu’on appelle des gestionnaires d’évènements, avec addEventListener.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementById("diviseur_1").addEventListener("change", function () {
  benef("dividende_1", "diviseur_1", "resultat_1");
});

Au fait, il vaut mieux ne pas utiliser innerHTML. Dans ton cas tu as seulement besoin de textContent.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

resultat.textContent = dividende/diviseur;

Et puisque tu débutes, prends tout de suite l’habitude d’utiliser le mode strict, ça t’épargnera bien des maux de têtes

Autre chose : ne sois pas surpris si tu as parfois des erreurs de précision, par exemple avec 0.1 + 0.11. C’est un problème lié à la représentation des nombres à virgule flottante, ce n’est pas propre à JavaScript. Quand on manipule des prix, on préfère multiplier par 100 pour avoir toujours des centimes (les « unités basses »), de sorte que les calculs se font toujours avec des nombres entiers.
Et si tu as vraiment besoin de faire du calcul de précision, il vaut mieux utiliser une bibliothèque tierce, par exemple big.js.

**psychadelic** · 16/03/2019, 16h19

Il y a aussi le fait document.getElementById("dividende_1") (et autres) ne renvoie pas à la valeur contenue mais à l'élément lui même https://developer.mozilla.org/fr/doc...getElementById

pour récupérer la valeur d'un input on utilise généralement sa méthode .value, mais son défaut est de retourner la valeur "brute", ici par exemple si la valeur n'est pas saisie cela ne retournera pas la valeur zéro.
=> https://developer.mozilla.org/fr/doc...MLInputElement
et il manque aussi un test pour éviter de diviser par zéro.

comme un exemple vaut mieux qu'un long discours, voici ce que je pense être du code JS ES6 propre (amha)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="fr">
 
<head>
  <meta charset="UTF-8">
  <title>Division</title>
<style>
  table {  border-collapse: collapse; }
  table td {  border: 1px solid grey; width: 200px; padding: 5px 10px;}
</style>
</head>
<body>
  <table>
    <tr>
      <td><input id="dividende_1" type="number"></td>
      <td><input id="diviseur_1" type="number"></td>
      <td id="resultat_1">?</td>
    </tr>
  </table>
  <script>
    "use strict";
 
    const
      dividende_element = document.getElementById("dividende_1")
      ,
      diviseur_element = document.getElementById("diviseur_1")
      ,
      resultat_element = document.getElementById("resultat_1")
      ;
 
    // console.log(resultat_element);  // exemple d'utilisation du mode console
 
    function calcul_benef() {
      let
        dividende_v = dividende_element.valueAsNumber
        ,
        diviseur_v = diviseur_element.valueAsNumber
        ;
 
      resultat_element.textContent = "n/a";
 
      if (diviseur_v !=  0) {
        resultat_element.textContent = dividende_v / diviseur_v;
      }
    }
 
    dividende_element.onchange = calcul_benef;
    diviseur_element.onchange = calcul_benef;
  </script>
</body>
</html>

syntaxe function javascript à plusieurs variables

JavaScript

Discussions similaires

Partager

Partager