syntaxe function javascript � plusieurs variables

Version imprimable

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:

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:

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 :)

16/03/2019, 15h32
Watilin
Citation:

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.

Citation:

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:

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:

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.

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:

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>