Slider html, Réccupérer une value et l'afficher dans la page

**jay-ko** · 13/07/2009, 14h35

Bonjour,

Je me permets de vous envoyer ce message, car je ne connais pas assez le javascript pour trouver seul la solution, et j'ai donc besoin d'un petit coup de pouce, que ce soit pour m'envoyer vers le bon tuto, la bonne page de la doc, ou plus si vous jugez que l'opération est compliqué à réaliser par un apprentit.

J'ai un slider en dhtml qui me permet de sélectionner 5 valeurs.

Le .js qui affiche le slider à été trouvé ici: http://www.dhtmlgoodies.com/index.ht..._amount_slider

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
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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Text box slider</title>
 <style type="text/css">
 
 .form_widget_amount_slider{
  border-top:1px solid #9d9c99;
  border-left:1px solid #9d9c99;
  border-bottom:1px solid #eee;
  border-right:1px solid #eee;
  background-color:#f0ede0;
  height:3px;
  position:absolute;
  bottom:0px;
   }
 
 </style>
 <script src="dhtmlgoodies_slider.js"></script>
 <script type="text/javascript">
 function setentrybytype()
 {
  var formObj = document.forms[0]; 
  var type = formObj.niveau.value.replace(/[^\d]/,'');
  if(type=0)type=debutant;
  if(type=1)type=supérieur;
  if(type=2)type=avancé;
  if(type=3)type=expert;
 
 }
 </script>
 
</head>
<body>
 
<form>
 <table>
  <tr>
   <td width="0">Niveau</td>   
   <td id="slider_target"></td>
   <td><input type="text" name="type" size="3" value="débutant" onchange="setentrybytype()"></td>
  </tr>
 </table>
 </form>
 
 
<script type="text/javascript">
// Javascript pour le slider 
 
form_widget_amount_slider('slider_target',document.forms[0].type,200,0,3,"setentrybytype()");
 
</script>
<p>voici mon slider.</p>
</body>
</html>

Comme vous avez dû vous en rendre compte je tente d'écrire en face de mon slider, un texte en fonction de la valeur de mon imput, sachant que la valeur par défaut est "débutant".

C'est pour ça que j'ai tenté d'écrire une fonction qui viendrait remplacer le texte en temps réel sur ma page en fonction de la valeur de mon slider:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
function setentrybytype()
 {
  var formObj = document.forms[0]; 
  var type = formObj.niveau.value.replace(/[^\d]/,'');
  if(type=0)type=debutant;
  if(type=1)type=supérieur;
  if(type=2)type=avancé;
  if(type=3)type=expert;
 
 }

Le principe n'a pas l'air compliqué mais je ne sais pas par quoi commencer.

Pour info, je souhaite par la suite généré des couleurs différentes du fond de mon slider en fonction de la valeur de celui-ci afin de suivre l'exemple suivant:
exemple
En passant du vert clair au rouge. .... l'idée me plais, à voir une fois intégré si ce n'est pas trop kitch.

Merci d'avance pour vos éléments de réponses.

**emmanuel.remy** · 13/07/2009, 20h25

salut,

Déjà, fais attention car en javascript (comme en PHP, en C, en Java, en C# etc...) le "=" est l'opérateur d'affectation, pas de test. Il faut utiliser ==; et les chaines de caractères sont entre quotes ou guillemets:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function setentrybytype()
 {
  var formObj = document.forms[0]; 
  var type = formObj.niveau.value.replace(/[^\d]/,'');
  if(type==0)type="debutant";
  else if(type==1)type="supérieur";
  else if(type==2)type="avancé";
  else if(type==3)type="expert";
 
 }

Ensuite en imaginant que c'est une balise span qui reçoit le texte associé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span id="niveauJoueur">Débutant</span>

alors ta fonction doit en tenir compte:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function setentrybytype()
 {
  var formObj = document.forms[0]; 
  var type = formObj.niveau.value.replace(/[^\d]/,'');
  var niveauJoueur = document.getElementById("niveauJoueur");
  if(type==0) niveauJoueur.innerHTML="debutant";
  else if(type==1) niveauJoueur.innerHTML="supérieur";
  else if(type==2) niveauJoueur.innerHTML="avancé";
  else if(type==3) niveauJoueur.innerHTML="expert";
 
 }

Enfin si tu n'as pas d'autre code que celui-ci, on peut envisager de passer par un tableau:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function setentrybytype()
 {
  var formObj = document.forms[0]; 
  var type = parseInt(formObj.niveau.value.replace(/[^\d]/,''));
  niveaux = ["debutant","supérieur","avancé","expert" ];  
 
  document.getElementById("niveauJoueur").innerHTML= niveaux[type];
}

Tu as le choix

ERE

Slider html, Réccupérer une value et l'afficher dans la page

JavaScript

Discussions similaires

Partager

Partager