Recupération et modification dynamique d'un RANGE en Javascript

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,

J'essaye (en vain) d'utiliser un RANGE dans mon application, mais impossible d'afficher dynamiquement une valeur et de le positionner correctement en fonction de cette valeur.

Je cherche donc à initialiser dynamiquement la valeur sous la jauge et que la jauge se positionne aussi automatiquement en fonction de cette valeur :
Pièce jointe 221832

Voici le code HTML :
Code:

1 2 3 4 5 6 7 8 <DIV align="center" class="DivProgress"> <P>Transparence 2 :<BR/> <INPUT class="Progress2" type="range" name="C_PctTrans2" min="0" max="1" step="0.05" value="0.50" ONINPUT="C_ValPctTrans2.value=C_PctTrans2.value"/> <BR/> <OUTPUT class="DivProgress" name="C_ValPctTrans2"></OUTPUT> </P> </DIV>
Voici le bout de JS dans lequel il n'y a pas grand chose, mais c'est juste une partie du Window_onload() de ma page :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ... ... ... //document.getElementsByName("C_ValPctTrans2").innerHTML = G_TRANSPARENCE_TRAJ; //document.getElementsByName("C_PctTrans2").value = G_TRANSPARENCE_TRAJ; // //document.getElementsByName("C_ValPctTrans2").innerHTML=document.getElementsByName("C_PctTrans2").value; //document.getElementsByName("C_ValPctTrans2").value=document.getElementsByName("C_PctTrans2").value; //C_ValPctTrans2.value=C_PctTrans2.value document.getElementsByName("C_PctTrans2").value = "0.07"; ... ... ...
Merci d'avance...

Essaie en mettant tes contrôles dans un form :

Code:

1
2
3
4
5
6
7
8
9
<DIV align="center" class="DivProgress">
<form onsubmit="return false" oninput="C_ValPctTrans2.value = C_PctTrans2.value;">
	<P>Transparence 2 :<BR/>
	<INPUT class="Progress2" type="range" id="C_PctTrans2" name="C_PctTrans2" min="0" max="1" step="0.05" value="0.50"/>
	<BR/>
	<OUTPUT for="C_PctTrans2" class="DivProgress" id="C_ValPctTrans2">0.5</OUTPUT>
	</P>
</form>
</DIV>

Merci de ta réponse, mais il sont déjà dans un Form, mais je n'ai pas mis tout le code HTML, je n'ai pas pensé que ça pouvait avoir une importance, et donc quand je reprend ton code, ça ne lui plait pas, ce qui est normal car je ne crois pas qu'on puisse mettre un Form dans un autre.

Si çà peut aide, voici un peu plus du 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
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<BODY onLoad=Window_onload();>
<FORM method="post" action="" name="Form_TRAC" id="Form_TRAC" enctype="multipart/form-data" >
...
...
...
function Window_onload() {
// Récupération de la plateforme passée en paramètre
	var WUrl_Page = new String(document.location);
	var WDecoupage = WUrl_Page.split("?");
	var WParam = WDecoupage[1].split("_PARAM_=");
	var WPltf = WParam[1].split(",");
 
	if (WPltf == "BALEMULHOUSE")
	{
		Trt_Titre("ENTRACT : Aéroport de Bâle-Mulhouse");
		document.getElementById("DIV_NomAeroport").innerHTML = "Aéroport de Bâle-Mulhouse";
		document.getElementById("DIV_NomAeroport").setAttribute("align", "left");
		document.getElementById("LI_Infos").style.display = "inline"; // Affichage du menu "Explications".
	};
	document.body.style.backgroundColor = G_COUL_FOND;
	document.getElementById("DivCarte").style.width = G_WIDTH_DIVCARTE;
	document.getElementById("DivCarte").style.height = G_HEIGHT_DIVCARTE;
	document.getElementById("J_Transparence").value = G_TRANSPARENCE_TRAJ;
 
//document.getElementsByName("C_ValPctTrans2").innerHTML = G_TRANSPARENCE_TRAJ;
//document.getElementsByName("C_PctTrans2").value = G_TRANSPARENCE_TRAJ;
//
//document.getElementsByName("C_ValPctTrans2").innerHTML=document.getElementsByName("C_PctTrans2").value;
//document.getElementsByName("C_ValPctTrans2").value=document.getElementsByName("C_PctTrans2").value;
 
//C_ValPctTrans2.value=C_PctTrans2.value
 
document.getElementsByName("C_PctTrans2").value = "0.07";
...
...
...

04/10/2016, 11h06
EddiGordo

Ce n'est pas grave, fais des essais avec mon code seul (mets le dans un fichier test.html par exemple) pour comprendre comment il fonctionne et adapte tout ça à ton formulaire :D
04/10/2016, 12h46
Zebulon777

Ton code, comme le mien, fonctionne très bien, sauf qu'il faut que je puisse afficher la valeur d'initialisation dynamiquement.

Par exemple, quand, dans mon code, je fais document.getElementsByName("C_PctTrans2").value = "0.07";, il faut que la jauge se positionne automatiquement au bon endroit et que la nouvelle valeur s'affiche sous la jauge (dans le OUTPUT), ce qui ne fonctionne pas et je ne vois pas pourquoi.

Ah, je ne voyais pas ce qui te manquait désolé.
getElementsByName renvoie un tableau et les tableaux n'ont pas de propriété value.
Donc :
Code:

1 2 3 4 5 6 7 8 Soit : document.getElementsByName('C_PctTrans2')[0].value = "0.07"; document.getElementsByName('C_ValPctTrans2')[0].value = "0.07"; Soit : document.getElementById("C_PctTrans2").value = "0.07"; document.getElementById("C_ValPctTrans2").value = "0.07";
Par contre, 0.07 n'est pas une valeur adéquate car dans ton initialisation, tu spécifies un pas de 0.05.

04/10/2016, 15h45
Zebulon777

Génial !
C'est exactement ça !
Merci m'sieur.

Pour le 0.07, je savais, mais c'était juste pour l'exemple.

Super et en plus, je ne savais pas du tout que getElementsByName renvoyait un tableau.

Il ne me reste plus qu'à trouver comment appliquer cette valeur directement sur la transparence de mes flux IGN... :oops: