Afficher telle image en fonction d'un resultat JS

**raphaelf2** · 13/03/2017, 17h01

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

**danielhagnoul** · 13/03/2017, 20h42

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

**raphaelf2** · 13/03/2017, 22h37

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

**danielhagnoul** · 14/03/2017, 11h42

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

Afficher telle image en fonction d'un resultat JS

JavaScript

Discussions similaires

Partager

Partager