Insertion code JavaScript dans une page HTML

Version imprimable

Bonsoir les grands,
Svp, en tant que débutant dans le domaine de programmation web, j'ai écrit un code pour faire une mini calculatrice.
J'ai écrit le bout de code suivant en HTML mais il ne marche pas!

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
<!DOCTYPE html>
<html>
<head>
<title>Mini calculatrice
</title>
<meta charset="utf-8">
<script type="text/javascript" language="javascript" src="code.js"></script>
</head>
<body>
Veuillez entrer les nombres et choisir l'opération que vous voulez effectuer<br>
 
<form onsubmit="return res">
 
					<input type="number" name="nbr1" placeholder="Nombre 1">
					<input type="number" name="nbr2" placeholder="Nombre 2">
				<button type="submit" class="full" onClick="calc">Calculer</button><br>
 
 
<input type="radio" name="choix" value="0">Multiplication<br>
<input type="radio" name="choix" value="1">Addition<br>
<input type="radio" name="choix" value="2">Division<br>
<input type="radio" name="choix" value="3">Soustraction<br>
</form>	
 
</body>
</html>

et cet autre code que j'ai mis dans un fichier externe JS

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
function calc(nbr1, nbr2){
	var a = nbr1.produit1.value;
	var b = nbr2.produit2.value;
 
	if (nbr1 && nbr2 ) { 
		var pro= a*b;
		var som=a+b;
		var sou=a-b;
		var div=a/b;
		alert("Le resultat est: " + res);
		return false;
	}
	else {
      alert("Veuillez remplir tous les champs!");
      return false;
   }
   if (document.choix[0].checked==true)
   {var res=pro;}
   else if (document.choix[1].checked==true)
   {var res=som;}
else if (document.choix[2].checked==true)
{var res=sou;}
else if (document.choix[3].checked==true)
{var res=div}
}

Mais le résultat n'est pas celui que j'espère
Besoin de votre aide svp

Il y a beaucoup d'erreurs dans ton code.

Voici une base et seulement une base car il y a d'autres améliorations à faire.

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<!DOCTYPE html>
<html>
<head>
<title>Mini calculatrice
</title>
<meta charset="utf-8">
<script type="text/javascript" language="javascript">
function calc(){
 var a = document.getElementById('nbr1').value;
 var b = document.getElementById('nbr2').value;
 var o = document.getElementsByName('choix');
 
 if (a && b ) 
 { 
    if (o[0].checked)
    {
   var res=a*b;
    }
    else 
    {
     if (o[1].checked)
     {
    var res=parseFloat(a)+parseFloat(b); // parce que + sert aussi à la concaténation de deux chaînes
     }
     else 
     {
      if (o[2].checked)
      {
     var res=a/b;
      }
      else 
      {
       if (o[3].checked)
       {
      var res=a-b;
       }
       else
       {
      alert("Veuillez sélectionner une opération !"); 
      return false;
       }
      }     
     }    
    }
    alert('Résultat =' + res);
  }
  else
  {
      alert("Veuillez remplir tous les champs!");
  }
      return false;  
}
</script>
 
</head>
<body>
Veuillez entrer les nombres et choisir l'opération que vous voulez effectuer<br>
 
<form onsubmit="calc()" name="mon_formulaire">
 
 <input type="number" id="nbr1" placeholder="Nombre 1">
 <input type="number" id="nbr2" placeholder="Nombre 2">
 <input type="submit" class="full" value='Calculer'/><br>
 
 
 <input type="radio" name="choix" value="0">Multiplication<br>
 <input type="radio" name="choix" value="1">Addition<br>
 <input type="radio" name="choix" value="2">Division<br>
 <input type="radio" name="choix" value="3">Soustraction<br>
</form> 
 
</body>
</html>

26/12/2018, 06h33
Merlo

Merci beaucoup
26/12/2018, 07h33
Merlo
Bonjour et merci pour cette aide
stp je ne comprends pas la différence ici
Citation:
Envoyé par badaze

Code:

1 2 3 4 var a = document.getElementById('nbr1').value; var b = document.getElementById('nbr2').value; var o = document.getElementsByName('choix');
entre document.getElementsByName et document.getElementById

et aussi je ne vois pas où se trouve

Citation:

Envoyé par badaze

Code:

name="mon_formulaire">

qu'on utilise ici.

Merci beaucoup!
26/12/2018, 10h53
badaze

Un élément HTML peut avoir un id et un name. L'id doit être unique mais le name pas forcément; tes boutons radio ont le même name.
D'où la différence entre getElementById avec element au singulier et getElementsByName avec elements au pluriel car ce dernier peut ramener plus d'un élément.

Pour name="mon_formulaire" j'avais essayé un truc que j'ai abandonné et pour le cas ne sert à rien même s'il ne gêne pas.
27/12/2018, 05h55
Merlo

J'ai aussi un autre problème stp
J'ai copié la fonction calc et j'ai mis dans un fichier externe code.js mais lorsque "j’appelle" cette fonction ça ne répond pas.

Code:

<script language=JavaScript src=code.js> </script>
27/12/2018, 09h38
ProgElecT

Salut

Code:

<script src="code.js"></script>