Insertion code JavaScript dans une page HTML

**Merlo** · 25/12/2018, 18h22

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

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

**badaze** · 26/12/2018, 00h14

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

**Merlo** · 26/12/2018, 06h33

Merci beaucoup

**Merlo** · 26/12/2018, 07h33

Bonjour et merci pour cette aide
stp je ne comprends pas la différence ici

Envoyé par badaze

Code :

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

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

Envoyé par badaze

Code :

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

name="mon_formulaire">

qu'on utilise ici.

Merci beaucoup!

**badaze** · 26/12/2018, 10h53

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.

**Merlo** · 27/12/2018, 05h55

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 :

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

<script language=JavaScript src=code.js> </script>

**ProgElecT** · 27/12/2018, 09h38

Salut

Code :

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

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

Insertion code JavaScript dans une page HTML

JavaScript

Discussions similaires

Partager

Partager