Variable affichée qui se met à jour suivant une fonction

Version imprimable

02/12/2016, 18h29
maryliseduteil

Variable affichée qui se met à jour suivant une fonction
Bonjour,

Je cherche à mettre en place une fonction qui me paraissait simple au départ, mais qui finalement me laisse sur le carreau. :D

Je souhaite afficher une valeur numérique égale à 20.
Bien entendu, cette valeur sera amenée à changer suivant des événements et la valeur devra se mettre à jour à chaque fois pour que l'utilisateur sache combien il lui reste.

J'ai donc fait ceci :

Code:

var depart = 20;

Et c'est tout :mouarf:
Parce que le reste, je n'y arrive pas (j'ai essayé douze mille trucs différents sans succès). :?

La fonction est appelée sous cette forme :
Code:

1 2 3 onclick="depense(-8)" // on dépense 8 € Ou encore : onclick="depense(2)" // on récupère 2 €
Il faut donc que mon porte-monnaie soit visible pour l'utilisateur, et que le décompte soit tenu à jour au fur et à mesure des dépenses, sachant qu'il y a de multiples "bouton onclick", chacun avec une dépense différente.

Donc en fait, si j'ai bien compris, il me faut mettre en place la fonction depense(), mais je n'y arrive pas. :(

Merci d'avance et encore pour votre aide. :)
02/12/2016, 19h19
eleydet
Bonsoir,

Au premier abord, voici ce à quoi je pense :
Code:

1 2 function depense(nb) { valeur = valeur + nb; }
02/12/2016, 23h52
Auteur
bonsoir,

Citation:

Envoyé par maryliseduteil

je n'y arrive pas (j'ai essayé douze mille trucs différents sans succès). :?

peut-on voir quelques uns de ces 12000 trucs pour que l'on puisse t'aider ?
Citation:
La fonction est appelée sous cette forme :

Code:

1 2 3 onclick="depense(-8)" // on dépense 8 € Ou encore : onclick="depense(2)" // on récupère 2 €
les événements javascript s'insèrent dans les balises HTML. Il te manque donc le code HTML.

Merci pour vos réponses.

@Eleydet : je vais voir avec ça, mais pas sûr d'arriver à l'implémenter.

@Auteur : Oui je les ai mis dans des éléments html évidemment, là sur le topic j'ai juste mis la déclaration du onclick. :)

Pour les fonctions que j'avais essayé, étant assez nulle en javascript, et que ça ne donnait aucun résultat concret, j'ai tout effacé.

En gros ça donnait quelque chose comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 var depart = 20; alert(depart); // ça c'est pour vérifier que ça fonctionne bien, mais je ne compte pas le garder var actuelle = depart + depense(modif) ; alert(actuelle); function depense(modif) { var resultat = actuelle + modif; alert(resultat); }
Mais à part la popup qui m'affiche 20 au début, rien ne se passe ensuite à part une autre popup qui m'indique NaN.

J'aurais voulu aussi voir ton code HTML. Cela permet de voir comment tu as intégré ton javascript dans la page.

Tu as une variable depart qui contient la valeur initiale => ok
Ensuite, ce que tu dois faire : chaque fois que ton utilisateur fait un choix, appeler ta fonction depense(). Là c'est le contenu de depart que tu dois modifier puis afficher. Il y a un petit problème de logique dans ton code, non ? :)
Code:

1 2 3 4 5 6 7 8 9 var depart = 20; alert("Il y a dans mon porte-monnaie " + depart + "€"); // ça c'est pour vérifier que ça fonctionne bien, mais je ne compte pas le garder function depense(modif) { var depart = depart - modif; alert("Il reste dans mon porte-monnaie " + depart + "€"); }
Comment tu intègres ça dans ta page html ?

03/12/2016, 13h23
maryliseduteil
Je l'intègre tout simplement avec soit un bouton, soit une image ou autre.
J'ai choisi une image :
Code:

1 2 3 <p><img src="image.jpg" onclick="depense(-8)" ><strong>Acheter à 8 €</strong></p> <p><img src="image.jpg" onclick="depense(5)" ><strong>Vendre à 5 €</strong></p>
Je précise que ce n'est pas du tout pour faire une boutique en ligne, mais pour un petit jeu interactif. :)

Je vais me pencher sur ta fonction, merci beaucoup :)
03/12/2016, 13h31
maryliseduteil

Alors ta fonction m'affiche bien la somme de départ, mais ensuite, ça m'affiche (en cliquant sur mes images avec fonction) : "Il reste dans votre porte-monnaie NaN€" :?

Bonjour,

Si j'ai bien compris...

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">
  <script>
    var depart = 20;
    alert("Il y a dans mon porte-monnaie " + depart + "€"); // ça c'est pour vérifier que ça fonctionne bien, mais je ne compte pas le garder
 
    function depense(modif) {
      depart = depart - modif;  
      alert("Il reste dans mon porte-monnaie " + depart + " €");
    }
 
  </script>
</head>
 
<body>
  <p><img src="image.jpg" onclick="depense(-8)" ><strong>Acheter à 8 €</strong></p>
  <p><img src="image.jpg" onclick="depense(5)" ><strong>Vendre à 5 €</strong></p>
</body>
 
</html>

03/12/2016, 14h02
maryliseduteil

Merci Eleydet, ça semble bien fonctionner :)
Je reviens vers vous pour mettre le topic sur résolu dès que j'ai terminé de tout intégrer :)
Merci encore.
03/12/2016, 14h29
Auteur

Citation:

Envoyé par maryliseduteil

Alors ta fonction m'affiche bien la somme de départ, mais ensuite, ça m'affiche (en cliquant sur mes images avec fonction) : "Il reste dans votre porte-monnaie NaN€" :?

effectivement, j'ai fait une erreur dans mon code. Je te laisse découvrir laquelle.

j'ai redéclaré la variable depart.
03/12/2016, 14h43
maryliseduteil
En effet, il y avait un var en trop. :)

Bon alors la fonction marche bien, c'est chouette. Mais il me reste à afficher la valeur dans un div (visible en permanence) plutôt que dans une popup alert qu'il faut fermer à chaque fois.

J'ai essayé ça :
Code:

1 2 3 4 5 6 7 var depart = 20; function depense(modif) { depart = depart + modif; }
Et dans le html :
Code:

1 2 3 <script> document.write(depart); // affiche la variable depart </script>
Mais le chiffre qui s'affiche sur ma page reste bloqué sur 20.
Qu'est-ce qui ne va pas du coup ?
03/12/2016, 14h52
NoSmoking
Bonjour,
ton erreur initiale :
- var depart = 20; RAS
- alert(depart); // ça c'est pour vérifier que ça fonctionne bien, mais je ne compte pas le garder RAS
- var actuelle = depart + depense(modif) ; que vaut modif ?
- alert(actuelle); le script a planté la ligne au dessus donc plus rien ne se passe.
03/12/2016, 14h53
Auteur

document.write() est à bannir surtout si tu débutes. Comprendre document.write()

Ce que tu dois faire : ajouter l'attribut id à ton div puis l'appeler avec la fonction document.getElementById() et injecter la valeur grâce à l'attribut innerHTML.
03/12/2016, 15h00
maryliseduteil

@NoSmoking : modif est une valeur numérique déterminée dans la fonction du onclick :
onclick="depense(-4)"

@Auteur : :? Dis comme ça, ça a l'air compliqué. :D

Donc j'ai un div id="porte-monnaie"
Je l'appelle (en dehors ou dedans ma fonction ?) de cette façon : document.getElementById(porte-monnaie)

Mais la suite je n'ai pas compris. :mrgreen:
03/12/2016, 16h03
Auteur

Citation:

Envoyé par maryliseduteil

@Auteur : :? Dis comme ça, ça a l'air compliqué. :D

meuh non

Citation:

Envoyé par maryliseduteil

Mais la suite je n'ai pas compris. :mrgreen:

:aie:
document.getElementById()
innerHTML

Citation:

Envoyé par maryliseduteil

Je l'appelle (en dehors ou dedans ma fonction ?)

à ton avis ? :whistle:
03/12/2016, 16h40
maryliseduteil
Je comprends pas grand-chose même après avoir lu.

Pour le moment j'ai fait ça mais ça ne fonctionne pas car je ne sais pas quoi mettre entre les guillemets :
Code:

1 2 3 4 5 6 var depart = 20; function depense(modif) { depart = depart + modif; document.getElementById("porte-monnaie").innerHTML = ""; }
Et j'ai aussi mis un div porte-monnaie dans mon html bien sûr.

Quand je vous disais que j'avais du mal avec la programmation... :?
03/12/2016, 16h42
maryliseduteil

Ah c'est bon :D
Il suffisait de mettre depart sans les guillemets.

Merci :)

Il me reste à afficher la valeur dès le départ, soit 20. En effet, le chiffre n’apparaît que lorsque je clique sur un bouton, j'aimerai qu'il soit visible dès le départ donc...
03/12/2016, 18h54
Auteur

Et si tu appelais ta fonction po_depense() (avec quel valeur pour l'argument ?) sur l'événement onload (dans quelle balise ?) ? :mrgreen:
04/12/2016, 03h38
maryliseduteil

C'était depense que je voulais mettre pour suivre l'exemple du début, et non po_depense. :)

Bonjour,

Voilà où j'en suis à présent avec ma fonction. Tout marche bien, sauf lorsque je met ensuite des conditions. Je vous met le html avec tout dedans (styles, javascript...) :

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
<!DOCTYPE html>
<html lang="fr">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Test</title>
	<meta name="viewport"content="initial-scale=1">
	<style>
        body {width:50%;margin:150px auto;}
        #bourse {background: #000;width: 75px;float: left;margin: 20px;height: 73px;color: #fff;font-weight: bold;}
        #po {padding: 30px 25px;}
        button:hover {cursor:pointer;}
        </style>
 
	<script type="text/javascript">  
        var depart = 20;
        document.getElementById("po").innerHTML = depart;
                function depense(modif) {
                  depart = depart + modif;  
                  document.getElementById("po").innerHTML = depart;
                }
        </script>
</head>
 
<body>
 
	<div id="bourse"><div id="po">20</div></div>
 
		<div id="txt">	
			<p>Dépenser 5 pièces d'or. </p>
 
			<div id="txt_a" style="display:none;">
				<button onclick="depense(-5)" ><strong>Accepter</strong></button>
			</div>
 
			<div id="txt_b" style="display:none;">
				<p><strong>Vous ne pouvez pas payer</strong></p>
			</div>
 
			<script type="text/javascript">  
                        if (depart > 4) {document.getElementById('txt_a').style.display='block';}
                        else {document.getElementById('txt_b').style.display='block';}  
                        </script>	
		</div>				
</body>
	</html>

Donc ma bourse (var depart) se vide bien au fur et à mesure que je clique sur le bouton, de 5 en 5, et le chiffre résultant s'affiche bien dans la box noire.

Mais ma condition n'est pas prise en compte.
Si j'ai au moins 5 pièces d'or (po), txt_a doit s'afficher.
Si j'ai moins de 5 po, div txt_b doit s'afficher à la place de div txt_a.

Qu'est ce qui ne va pas dans ma fonction if ? C'est comme si elle ne prenait pas en compte les changements de ma variable depart. :weird:
C'est vraiment compliqué le javascript, je ne pensais pas que cette étape-ci me poserait problème. :?

Sachant que j'ai plusieurs blocs dans mon script à afficher suivant la valeur du compteur po.

Merci encore pour votre aide.

04/12/2016, 18h54
Auteur

1-

Citation:

Envoyé par maryliseduteil

Code:

document.getElementById("po").innerHTML = depart;

rhaaaaaaaaa :rouleau: C'est quoi cette ligne de code qui se balade toute seule dans tes balises script (pas la ligne qui se trouve dans ta fonction). Comment est chargée une page HTML ?
Commence par corriger ce 1er point en prenant en compte ma remarque précédente (onload....)

2-

Citation:

Envoyé par maryliseduteil

Qu'est ce qui ne va pas dans ma fonction if ?

une fonction if :cry:
que veux-tu faire avec ce if ?

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="bourse"><div id="po"></div></div>
 
<div id="txt">
  <p>Dépenser 5 pièces d'or. </p>
 
  <div id="txt_a" style="display:none;">
    <button onclick="depense(-5)"><strong>Accepter</strong></button>
  </div>
 
  <div id="txt_b" style="display:none;">
    <p><strong>Vous ne pouvez pas payer</strong></p>
  </div>
 
</div>

(j'ai remplacé "depart" par "bourse", plus explicite) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var bourse = 20; // valeur de départ
window.onload = function() { depense(0); }; // affiche la valeur de départ (modif=0)
 
function depense(modif) {
  bourse = bourse + modif;
  document.getElementById("po").innerHTML = bourse;
  verif_depense(bourse);
}
 
function verif_depense(bourse) {
  if (bourse > 4) {
    document.getElementById('txt_a').style.display = 'block';
    document.getElementById('txt_b').style.display = 'none';
  } else {
    document.getElementById('txt_a').style.display = 'none';
    document.getElementById('txt_b').style.display = 'block';
  }
}

05/12/2016, 05h48
maryliseduteil

@Auteur : cette ligne sert à afficher la valeur de départ dans mon div.
Si je ne met pas cette ligne, le div n'apparaît que lorsque la fonction est enclenchée, et non dès le départ comme je le souhaitais.

Le if n'est pas une fonction c'est vrai. :lol: Mais on s'est compris je pense.

Je souhaite donc afficher tel ou tel bloc de texte suivant le nombre de pièces qu'il me reste.

@Jreaux : merci pour le code. ;)
Je vais regarder tout ça dès que j'ai un moment.

Merci pour votre aide.

Citation:

Envoyé par maryliseduteil

@Auteur : cette ligne sert à afficher la valeur de départ dans mon div.

je mettrais ma main à couper que cela ne fonctionne pas. Quand tu écris :

Code:

<script type="text/javascript">document.getElementById("po").innerHTML = depart;

dans l'entête de ta page (balises head), l'élément "po" n'est pas encore chargé, donc le document.getElementById("po") retourne une erreur. Si tu veux afficher quelque chose dans cet élément après le chargement de la page tu dois le faire sur l'événement onload :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html lang="fr"> <head> <title>Test</title> <script type="text/javascript"> var msg= "coucou"; function afficheMessage() { document.getElementById("po").innerHTML = msg; } </script> </head> <body onload="afficheMessage()"> <div id="po"> </div> </body> </html>
Ne fonctionne pas :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html lang="fr"> <head> <title>Test</title> <script type="text/javascript"> var msg= "coucou"; document.getElementById("po").innerHTML = msg; </script> </head> <body> <div id="po"> </div> </body> </html>

Bonjour,

Pour que le code ci-dessous fonctionne :
Code:

1 2 3 4 5 <script> if (depart > 4) {document.getElementById('txt_a').style.display='block';} else {document.getElementById('txt_b').style.display='block';} </script>
Il faut qu'il soit exécuté plus d'une fois, en l'insérant dans la fonction depense().

11/12/2016, 19h15
maryliseduteil

Bonjour,
Merci pour vos conseils, je vais voir ce que j'arrive à faire avec tout ça. :)
12/12/2016, 08h36
eleydet

Bonjour,

maryliseduteil a écrit :

Citation:

Qu'est ce qui ne va pas dans ma fonction if ?

Votre condition if n'est exécutée qu'une seule fois. Il faut la placer dans votre fonction depense().
02/01/2017, 14h24
bacargoudiaby

Je vous conseille d'aller apprendre a utiliser les fonctions et comment l'appeler .Dans votre cas on dirai que vous ne connaissez pas assez les bases en Javascript.