IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Femme Profil pro
    Webmaster
    Inscrit en
    Novembre 2016
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2016
    Messages : 25
    Points : 6
    Points
    6
    Par défaut 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.

    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 :

    Et c'est tout
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  2. #2
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonsoir,

    Au premier abord, voici ce à quoi je pense :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    function depense(nb) { valeur = valeur + nb; }

  3. #3
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    bonsoir,

    Citation Envoyé par maryliseduteil Voir le message
    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 ?

    La fonction est appelée sous cette forme :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  4. #4
    Futur Membre du Club
    Femme Profil pro
    Webmaster
    Inscrit en
    Novembre 2016
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2016
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  5. #5
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 ?

  6. #6
    Futur Membre du Club
    Femme Profil pro
    Webmaster
    Inscrit en
    Novembre 2016
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2016
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    Je l'intègre tout simplement avec soit un bouton, soit une image ou autre.
    J'ai choisi une image :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  7. #7
    Futur Membre du Club
    Femme Profil pro
    Webmaster
    Inscrit en
    Novembre 2016
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2016
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    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€"

  8. #8
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonjour,

    Si j'ai bien compris...

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

  9. #9
    Futur Membre du Club
    Femme Profil pro
    Webmaster
    Inscrit en
    Novembre 2016
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2016
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    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.

  10. #10
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par maryliseduteil Voir le message
    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.

  11. #11
    Futur Membre du Club
    Femme Profil pro
    Webmaster
    Inscrit en
    Novembre 2016
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2016
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    var depart = 20;
     
        function depense(modif) {
        depart = depart + modif;  
     
     
        }
    Et dans le html :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 ?

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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.

  13. #13
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    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.

  14. #14
    Futur Membre du Club
    Femme Profil pro
    Webmaster
    Inscrit en
    Novembre 2016
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2016
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    @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é.

    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.

  15. #15
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par maryliseduteil Voir le message
    @Auteur : Dis comme ça, ça a l'air compliqué.
    meuh non

    Citation Envoyé par maryliseduteil Voir le message
    Mais la suite je n'ai pas compris.

    document.getElementById()
    innerHTML

    Citation Envoyé par maryliseduteil Voir le message
    Je l'appelle (en dehors ou dedans ma fonction ?)
    à ton avis ?

  16. #16
    Futur Membre du Club
    Femme Profil pro
    Webmaster
    Inscrit en
    Novembre 2016
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2016
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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...

  17. #17
    Futur Membre du Club
    Femme Profil pro
    Webmaster
    Inscrit en
    Novembre 2016
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2016
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    Ah c'est bon
    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...

  18. #18
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Et si tu appelais ta fonction po_depense() (avec quel valeur pour l'argument ?) sur l'événement onload (dans quelle balise ?) ?

  19. #19
    Futur Membre du Club
    Femme Profil pro
    Webmaster
    Inscrit en
    Novembre 2016
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2016
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    C'était depense que je voulais mettre pour suivre l'exemple du début, et non po_depense.

  20. #20
    Futur Membre du Club
    Femme Profil pro
    Webmaster
    Inscrit en
    Novembre 2016
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2016
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    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 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
    <!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.
    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.

Discussions similaires

  1. Réponses: 13
    Dernier message: 01/04/2008, 10h43
  2. Afficher la date du jour dans une formule
    Par Yodaf dans le forum SharePoint
    Réponses: 3
    Dernier message: 06/08/2007, 16h15
  3. Réponses: 5
    Dernier message: 20/04/2007, 10h00
  4. Un programme qui se met à jour tout seul
    Par ElbaC dans le forum C++
    Réponses: 6
    Dernier message: 09/06/2006, 12h19
  5. Réponses: 3
    Dernier message: 18/10/2005, 16h34

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo