Afficher telle image en fonction d'un resultat JS

Version imprimable

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:

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:

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"> m²&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>

13/03/2017, 20h42
danielhagnoul

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

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:

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:

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"> m²&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>

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

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
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"> m²&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>