1. #1
    Futur Membre du Club
    Femme Profil pro
    Formateur en informatique
    Inscrit en
    novembre 2015
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 25
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activité : Formateur en informatique
    Secteur : Biens de consommation

    Informations forums :
    Inscription : novembre 2015
    Messages : 12
    Points : 7
    Points
    7

    Par défaut Afficher telle image en fonction d'un resultat JS

    Bonjour,
    Je suis actuellement en train de chercher une méthode pour que entre 0 et 50 ( le résultat ) ça m'affiche une image ( mail.png ) et que entre 51 et 90 ça m'en affiche une autre ( mail1.png)

    La fonction de calcul marche impeccable, par contre aucune image ne s'affiche seulement un carré avec le nom du alt.

    Je suis preneur de toute information qui peux resoudre mon probleme en vous remerciant d'avance :p

    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
    <script language=JavaScript>
    function Calcule()
    {
    var c3=0.785
    var c1=document.getElementById('chiffre1').value;
    var c2=document.getElementById('chiffre4').value;
    var tt=c1*c3
    var ttt=c1-tt
    var tttt=tt/c2
    document.getElementById('total').value = parseInt(tt);
    document.getElementById('total2').value = parseInt(ttt);
    document.getElementById('total3').value = parseInt(tttt);
     
    if (tttt <= 50)
                    {
                            image.src="img/mail.png";
                    }
     
                    else
                    {
                            image.src="img/mail1.png";
                    }
    }
    Et le code HTML

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <form name="classification">
    <input class="css-input" placeholder="Globale… (cf : CAR)" id="chiffre1" onKeyup="Calcule()"/> kWh
    <br/><br/><br/>
    <div class="chauff"><input class="css-input" type="text" placeholder="Chauffage.." id="total"> kWh&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="css-input" placeholder="ECS.." type="text" id="total2"> kWh</div>
    <br/><br/>
    <div class="chauff"><input class="css-input" type="text" id="chiffre4" onKeyup="Calcule()" placeholder="Surface.." size="7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="css-inputc" placeholder="Résultat" type="text" id="total3"> kWh//an</div>
    <div class="bienvenue"><img id="imageCalcule" src="" alt="class" /></div>
    </div>
    </form>

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 612
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 612
    Points : 20 853
    Points
    20 853
    Billets dans le blog
    37

    Par défaut

    image.src ! Il manque la déclaration de la variable : var image = document.querySelector( "#imageCalcule" );

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Si un message vous a aidé ou vous semble pertinent, votez pour lui !

  3. #3
    Futur Membre du Club
    Femme Profil pro
    Formateur en informatique
    Inscrit en
    novembre 2015
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 25
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activité : Formateur en informatique
    Secteur : Biens de consommation

    Informations forums :
    Inscription : novembre 2015
    Messages : 12
    Points : 7
    Points
    7

    Par défaut

    Oula je sais pas si c'est moi qui gère mal mais ça ne marche pas :/ tjrs le meme probleme pas d'image enfin sa écrit le alt a l'interieur.
    Je te remercie tout de meme!
    voici mon code :

    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
    <script language=JavaScript>
    function Calcule()
    {
    var c3=0.785
    var c1=document.getElementById('chiffre1').value;
    var c2=document.getElementById('chiffre4').value;
    var tt=c1*c3
    var ttt=c1-tt
    var tttt=tt/c2
    document.getElementById('total').value = parseInt(tt);
    document.getElementById('total2').value = parseInt(ttt);
    document.getElementById('total3').value = parseInt(tttt);
    var image = document.querySelector( "#imageCalcule" );
     
    if (tttt <= 50)
                    {
                            image.src="img/mail.png";
                    }
     
                    else
                    {
                            image.src="img/mail1.png";
                    }
    }

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <form name="classification">
    <input class="css-input" placeholder="Globale… (cf : CAR)" id="chiffre1" onKeyup="Calcule()"/> kWh
    <br/><br/><br/>
    <div class="chauff"><input class="css-input" type="text" placeholder="Chauffage.." id="total"> kWh&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="css-input" placeholder="ECS.." type="text" id="total2"> kWh</div>
    <br/><br/>
    <div class="chauff"><input class="css-input" type="text" id="chiffre4" onKeyup="Calcule()" placeholder="Surface.." size="7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="css-inputc" placeholder="Résultat" type="text" id="total3"> kWh//an</div>
    <div class="bienvenue"><img id="imageCalcule" src="" alt="class" /></div>
    </div>
    </form>

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 612
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 612
    Points : 20 853
    Points
    20 853
    Billets dans le blog
    37

    Par défaut

    Il n'y a pas de problème avec le code ci-dessous (vérifier vos URL pour les images) :

    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
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="author" content="Daniel Hagnoul">
      <title>Test</title>
      <style>
        
        img {
          margin: 0.3rem;
        }
        
      </style>
      <script>
        'use strict';
        
        function Calcule(){
          var c3=0.785;
          var c1=document.getElementById('chiffre1').value;
          var c2=document.getElementById('chiffre4').value;
          var tt=c1*c3;
          var ttt=c1-tt;
          var tttt=tt/c2;
          
          document.getElementById('total').value = parseInt(tt,10);
          document.getElementById('total2').value = parseInt(ttt,10);
          document.getElementById('total3').value = parseInt(tttt,10);
          
          var image = document.querySelector( "#imageCalcule" );
          
          console.log( "tttt = ", tttt );
           
          if (tttt <= 50){
            image.src= "https://media.giphy.com/media/aOften89vRbG/giphy.gif"; // "img/mail.png";
          }else {
            image.src= "http://www.gif-maniac.com/gifs/54/53684.gif" ; // "img/mail1.png";
          }
        }
     
            
        document.addEventListener( 'DOMContentLoaded', ev => {
          
        }, false );
        
        window.addEventListener( 'load', ev => {
                
        }, false );
      </script>
    </head>
    <body>
      <main>
     
        <form name="classification">
        <input class="css-input" placeholder="Globale… (cf : CAR)" id="chiffre1" onKeyup="Calcule()"/> kWh
        <br/><br/><br/>
        <div class="chauff"><input class="css-input" type="text" placeholder="Chauffage.." id="total"> kWh&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="css-input" placeholder="ECS.." type="text" id="total2"> kWh</div>
        <br/><br/>
        <div class="chauff"><input class="css-input" type="text" id="chiffre4" onKeyup="Calcule()" placeholder="Surface.." size="7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="css-inputc" placeholder="Résultat" type="text" id="total3"> kWh/m²/an</div>
        <div class="bienvenue"><img id="imageCalcule" src="" alt="class" /></div>
        </div>
        </form>
     
      </main>
    </body>
    </html>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Si un message vous a aidé ou vous semble pertinent, votez pour lui !

Discussions similaires

  1. Afficher des image en fonction de ..
    Par miniteck27140 dans le forum VB.NET
    Réponses: 2
    Dernier message: 20/06/2010, 08h20
  2. Réponses: 8
    Dernier message: 16/07/2009, 18h50
  3. Réponses: 1
    Dernier message: 26/02/2009, 08h09
  4. Réponses: 6
    Dernier message: 12/02/2007, 18h27
  5. afficher une image en fonction de la valeur d un champ
    Par zahiton dans le forum Syntaxe
    Réponses: 3
    Dernier message: 24/01/2006, 16h22

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