Discussion :

[wperle]

Salut tout le monde,

Pourriez vous me montrer comment lire le contenu d'un id de mon input d'une manière dynamique. Je m'explique :
J'ai trois inputs type range, je voudrais ajouter la valeur du range en javascript une fois que je glisse ce dernier

Code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var tab = document.getElementsByTagName('input');
// Parcourir les inputs
for(var i = 0; i < tab.length; i++){
    if(tab[i].type == 'range'){
        console.log(tab[i]);
        /* résultat de la console est comme suis :
           <input id="math" type="range" step="1" max="10" min="1">
           <input id="physique" type="range" step="1" max="10" min="1"> 
           ici je souhaiterai récupérer l'id de mon input 
       */
    }
}

Merci pour aide.

[Bovino]

Tu n'as manifestement pas beaucoup d'imagination...

Code :

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

console.log(tab[i].id);

[wperle]

Vous avez raison, juste un peu de rappel. Bon je continue mon code , maintenant une belle erreur : "range.addEventListener is not a function"

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var tab = document.getElementsByTagName('input');
// Parcourir les inputs
for(var i = 0; i < tab.length; i++){
    if(tab[i].type == 'range'){
        var range = tab[i].id;
        var sortieRange = "val_" + tab[i].id;  // un span pour afficher la valeur du range
        range.addEventListener('change', function(){
            afficherValeur(range, sortieRange)
        }, false);
    } // mon erreur est à ce niveau afficherValeur(range, sortieRange)
}
function afficherValeur(r, v){
    document.getElementById(v).innerHTML = r.value;
}

[Bovino]

Euh... tu comprends ce que tu fais là ?

Code :

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

1
2
var range = tab[i].id;
range.addEventListener(...)

Si range est un identifiant (donc une chaine de caractères concrètement), comment veux-tu lui affecter un gestionnaire d'événement ???

[wperle]

Effectivement, j'ai déjà changé le nom de la variable rg au lieu de range, mais le problème persiste toujours.

[sekaijin]

tu es sur de savori ce que tu fais ?

ce n'est pas parque que tu change le nom de la variable que ce n'est plus un id
A+JYT

[Bovino]

Mais ce n'est pas le nom de la variable qui pose problème, c'est son contenu...

[wperle]

Je reprends le 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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
      window.addEventListener('load', initRange, false);
 
      /**
        * Initialiser le range
        */
        function initRange(){ 
 
               /* var inputs = document.getElementsByTagName('input');
 
                    for(var i = 0; i < inputs.length; i++) {
                      if(inputs[i].type == "range") {
                        var rang = inputs[i].id;
                        var val = "note_".rang;
                      }
                    }
                
         *  Je souhaiterais appliquer une seule fonction sur l'ensemble de range
         *  au lieu de faire une fonctions pour chaque range, un total de 2 fonctions
         *  
         *  */
 
 
 
                var math = document.getElementById("math");
                var physique=document.getElementById("physique");
 
 
                /* Math */
                math.addEventListener('change', function(){AfficheNote(math, "note_math")}, false);
                AfficheNote(math, "note_math");
 
 
                /* physique */
                physique.addEventListener('change', function(){AfficheNote(physique, "note_physique")}, false);
                AfficheNote(physique, "note_physique");
 
 
                function AfficheNote(note, champ){
                        document.getElementById(champ).innerHTML = note.value;
                }
        }