Calcul dans une page html

Version imprimable

11/10/2014, 13h31
subfestivus

Calcul dans une page html

Bonjour ,

je souhaiterai dans une page html réaliser un calcul , un champ "volume" pour rentrer une valeur , un second champ "pourcentage" pour une valeur et un bouton pour afficher le résultat dans la page.
le résultat du calcul serait la valeur du champ volume * par la valeur du champ pourcentage /100

Pouvez-vous m'apporter un début de code svp ?
Merci de votre expertise
11/10/2014, 13h38
Auteur

Bonjour,

il faut du HTML pour la mise en page et les composant de type "input" ou "button". Un fonction javascript servira à lire le contenu des inputs, réaliser le calcul et afficher le résultat. Voilà pour le principe.

Citation:

Pouvez-vous m'apporter un début de code svp ?

Peut-on voir ce que tu as déjà fait car la politique du forum n'est pas justement de pas réaliser les exercices. On préfère donner un coup de main et aider les débutants à comprendre leurs erreurs en s'appuyant sur ce qui a été fait. Cette méthode est beaucoup plus pédagogique. ;)

Avec les indices que je t'ai donné, réalise d'abord le code HTML avec les composants nécessaires, puis intègre le code javascript.

Calcul dans une pagee html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
</head>
 
<body>
<label for="Volume d'eau">Text Field:</label>
<input type="text" name="Volume" id="textfield">
<label for="Pourcentage">Text Field:</label>
<input type="text" name="porcentage" id="textfield2">
<input type="button" name="button" id="button" value="calculer">
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
</head>
 
<body>
<label for="textfield">Volume d'eau:</label>
<input type="text" name="Volume" id="textfield">
<label for="textfield2">Pourcentage:</label>
<input type="text" name="Pourcentage" id="textfield2">
<input type="button" name="button" id="button" value="Envoyer"><script language="JavaScript" type="text/javascript"> 
 
<?php
$var1 = 'Volume';
$Var2 = 'Pourcentage';
echo  "$var1* $Var2 /100";        
 
?>
 
</body>
</html>

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
<html>
<head>
		<script type="text/javascript">
                        function Calcul(){
                                var a = document.getElementById('id1').value ;
                                var b = document.getElementById('id2').value ;
                                var c = 100
                                document.getElementById('id3').value =  parseFloat(a) *  parseFloat(b) /parseFloat(c);
                        };
                </script>
	</head>
<body bgcolor="#3399FF">
	<form>
 
			<input TYPE="number" ID="id1" style="width:60px; height:20px;" name="duree" value="" /> 
			<input TYPE="number" ID="id2" style="width:60px; height:20px;" name="duree" value="" /> 
			<input TYPE="number" ID="id3"  disabled="disabled" style="width:60px; height:20px;" name="duree" value="" /> 
			<input type="button" onClick="Calcul();" value="Calcul" /> 
</form>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
</head>
 
<body>
</body>
</html

11/10/2014, 20h05
Auteur

bonsoir,

lequel de ces 3 exemples je dois prendre ? Pourquoi du PHP dans le second ?
Quel sont les soucis que tu rencontres ?
15/10/2014, 11h29
Vil'Coyote

juste pour rappel, il existe un bouton "modifier" cela éviterais de pondre un message toute les 15min sans expliquer ce que tu fait, le souci etc ... nous fournir du code c'est bien mais fournir des explication en plus c'est mieux !