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

**Zebulon777** · 04/10/2016, 10h04

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 :
Nom : Trans02.png
Affichages : 374
Taille : 1,6 Ko

Nom : Trans02.png
Affichages : 374
Taille : 1,6 Ko

Voici le code HTML :

Code html :

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

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 javascript :

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
 
...
...
...
//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...

**EddiGordo** · 04/10/2016, 10h18

Essaie en mettant tes contrôles dans un form :

Code :

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

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>

**Zebulon777** · 04/10/2016, 10h49

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 javascript :

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

**EddiGordo** · 04/10/2016, 11h06

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

**Zebulon777** · 04/10/2016, 12h46

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.

**EddiGordo** · 04/10/2016, 14h10

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 :

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

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.

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager