Discussion :

[lcoulon]

Bonjour,

Je cherche à faire afficher une image lorsqu'une variable prend la valeur '1' et autre image lorsque cette meme variable prend la valeur '0'

Ma page contient 100 variables :

~sensor_favorite(1)~
...
~sensor_favorite(100)~

La valeur entre ~ ~ est donc soit 0 ou 1


Quel type de code javascript me permettrait de remplacer ces 100 variables par 100 petites images appelées favorite_1.png ou favorite_0.png ?

je voulais par exemple faire quelquechose dans une boucle for du type :
mais ça ne fonctionne pas ...

Code :

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

<span id ="FAV_1">?</span>

Code :

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

1
2
3
<script type="text/javascript">
document.getElementById('FAV_1').innerHTML = '<img src="favorite_' + '~sensor_favorite(1)~' + '.png">';
</script>

Je vous remercie pour votre aide,

[sekaijin]

les tableaux ça existe

[lcoulon]

Bonjour sekaijin

Pouvez vous être plus précis et me donner un exemple svp.

Merci à vous

[lcoulon]

Cette boucle ne fonctionne pas, je ne sais pas pourquoi :

Code :

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

1
2
3
4
5
6
<!-- Affichage de l'icone Favoris favorite_0.png ou favorite_1.png en fonction de l'état de chaque variable : ~sensor_favorite(i)~ //-->
 
<script language="JavaScript" type="text/javascript">
for(i = 1; i < 3; i++)
document.getElementById('FAV_'+i).innerHTML = '<img src="favorite_' + '~sensor_favorite(' +i ')~' + '.png">';
</script>

Par contre sans boucle avec un appel individuel ça fonctionne :

Code :

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

1
2
3
<script language="JavaScript" type="text/javascript">
document.getElementById('FAV_1').innerHTML = '<img src="favorite_' + '~sensor_favorite(1)~' + '.png">';
</script>

Pouvez vous m'indiquer ce qui ne va pas dans la boucle svp ?

[melka one]

jour

il manque un signe +

Code :

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

'<img src="favorite_~sensor_favorite('+i+')~.png">';

[lcoulon]

Avec ceci :

Code :

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

1
2
3
4
5
6
 
<!-- Affichage de l'icone Favoris favorite_0.png ou favorite_1.png en fonction de l'état de chaque variable : ~sensor_favorite(i)~ //-->
 
<script language="JavaScript" type="text/javascript"> for(i = 1; i < 11; i++)
document.getElementById('FAV_'+i).innerHTML = '<img src="favorite_' + '~sensor_favorite(' +i+ ')~.png">';
</script>

L'adresse de l'image n°1 dans l'explorateur à bien pour adresse : /favorite_~sensor_favorite(1)~.png
par contre, avec ce principe la variable ~sensor_favorite(1)~ n'est plus remplacée par sa valeur qui doit être '0' ou '1'


Bizarrement, le fait de l'intégrer dans une boucle 'for' pose donc pb.

Par contre si je remplace la boucle 'for' par cette ligne, l'image n°1 apparait correctement :

Code :

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

document.getElementById('FAV_1').innerHTML = '<img src="favorite_' + '~sensor_favorite(1)~' + '.png">';

[lcoulon]

Pouvez vous me dire pourquoi cette boucle ne permet pas d'updater la variable ~sensor_favorite(i)~ ?

Code :

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

1
2
3
4
5
6
 
<!-- Affichage de l'icone Favoris favorite_0.png ou favorite_1.png en fonction de l'état de chaque variable : ~sensor_favorite(i)~ //-->
 
<script language="JavaScript" type="text/javascript"> for(i = 1; i < 11; i++)
document.getElementById('FAV_'+i).innerHTML = '<img src="favorite_' + '~sensor_favorite(' +i+ ')~.png">';
</script>

Je n'arrive pas a faire apparaitre l'image favorite_1.png ou favorite_0.png dans <span id ="FAV_i">?</span> en fonction de l'état de ~sensor_favorite(i)~

Merci pour votre aide,

[NoSmoking]

Bonjour,
pourrais tu nous dire ce que représente vraiment ~sensor_favorite(i)~, une fonction, une variable...

[lcoulon]

Ce sont des variables : ~sensor_favorite(1)~ à ~sensor_favorite(10)~ qui sont updatés par le serveur

Ces variables contiennent un '1' ou '0'



Actuellement le span est replacé un lien d'image comme ceci : /favorite_~sensor_favorite(1)~.png

au lieu de /favorite_0~.png ou /favorite_1.png

Je pense que j'ai un pb de syntax pour l'élaboration du nom du fichier png mais je ne sais pas comment faire.

[NoSmoking]

Si ce sont des variables « strictes », tu as un problème car leur nom n'est pas valide dû à la présence des caractères ~ (et ), tu ne peux pas écrire

Code :

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

val_variable = ~sensor_favorite(1)~; // il y aura une erreur dans la console

Cela peut par contre appartenir à un objet JSON comme clé

Code :

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

1
2
3
4
5
6
var data = {
    "~sensor_favorite(0)~": 0,
    "~sensor_favorite(1)~": 1,
    "~sensor_favorite(2)~": 2,
    "~sensor_favorite(3)~": 3
}

et encore là il te faudra écrire

Code :

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

val_variable = data["~sensor_favorite(1)~"];

à ce même titre tu peux l’initialer comme suit

Code :

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

1
2
window["~sensor_favorite(1)~"] = 1;
val_variable = window["~sensor_favorite(1)~"]; // vaudra 1

et là tu pourrais parcourir toutes tes variables dans une boucles

Code :

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

1
2
3
4
for( var i= 0; i < 10; i +=1){
    val_variable =  window["~sensor_favorite(" +i +")~"];
    console.log(val_variable);
}

donc dans le

...qui sont updatés par le serveur

il faudrait que tu précise comment tu les récupères, les tildes ne sont-ils pas plutôt des séparateurs ?...

Comme sous entendu par sekaijin arrange toi pour recevoir un Array.

[lcoulon]

Pour le serveur, chaque variable est identifiée par le nom de celle-ci entre ~ ~
je ne peux pas changer l'attribution de ces caractères.

Je n'ai pas très bien compris le fonctionnement du code que tu proposes :

Ayant 10 variables de 1 à 10, faut il initialiser les 10 'val_variable' les uns après les autres ?

pourquoi reprends tu :
val_variable = data["~sensor_favorite(1)~"];
window["~sensor_favorite(1)~"] = 1;
val_variable = window["~sensor_favorite(1)~"]; // vaudra 1

pourquoi ne peut-on pas écrire :
val_variable = data["~sensor_favorite(i)~"];
window["~sensor_favorite(i)~"] = 1;
val_variable = window["~sensor_favorite(i)~"]; // vaudra 1

Pourquoi mettre la valeur 1 dans chaque variable sachant qu'on lira sa valeur réelle par la suite ?

--

Si j'effectue un traitement individuelle ( sans boucle ), variable par variable comme ceci, cela fonctionne :

Code :

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

1
2
3
4
5
<!--document.getElementById('FAV_1').innerHTML = '<img src="favorite_' + '~sensor_favorite(1)~' + '.png">';//-->
<!--document.getElementById('FAV_2').innerHTML = '<img src="favorite_' + '~sensor_favorite(2)~' + '.png">';//-->
...
<!--document.getElementById('FAV_9').innerHTML = '<img src="favorite_' + '~sensor_favorite(9)~' + '.png">';//-->
<!--document.getElementById('FAV_10').innerHTML = '<img src="favorite_' + '~sensor_favorite(10)~' + '.png">';//-->

[sekaijin]

mais ~sensor_favorite(i)~ n'est pas une variable
tes variable sont
~sensor_favorite(1)~
~sensor_favorite(2)~
~sensor_favorite(3)~
~sensor_favorite(4)~

si tu fais

Code :

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

1
2
var i = 1;
window["~sensor_favorite(i)~"] = 1;

ta variables s'appelle
~sensor_favorite(i)~"
elle ne s'appelle pas
~sensor_favorite(1)~"


Ce qu'il faut voir ce n'est pas le code que tu fournis
Ce qu'il vaut voir c'est le code qui défini les variables

Ton serveur exécute un script ce script produit du HTML/JS/CSS
ce HTML/JS/CSS est lut par le navigateur
Le navigateur Interprète le JS c'est là et seulement là que sont définies tes variables. et elle le sont par du code JavaScript

pour comprendre ce qu'il se passe on a besoin de connaitre cette partie là du JavaScript
tu ouvres ta page avec ton navigateur tu fais "afficher la source" (CTRL+U) et dans le code que le navigateur reçois il doit y avoir cette définition des variables.

Javascript ne connait rien d'autre tout ce qui est sur le serveur est déjà mort ton code serveur à déjà fini de s'exécuter.
les variables du serveur sont déjà détruite elle n'existent plus.
Il ne reste absolument rien de l'exécution de ta page sur le serveur.

La seule chose qui reste des un texte (HTML/JS/CSS) dans la mémoire du navigateur.
Lorsque le navigateur va interpréter ce texte il va créer des objets et des variable dans sa propre mémoire.
ces variables n'ont absolument rien à voir avec c'elle qui existait sur le serveur.
Elle ne dépendent que du texte qu'il a reçus.

pour comprendre un petit exemple

Code html :

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

1
2
3
4
5
6
7
8
9
10
<?php
$maBelleVariablePHP = 45;
$maSuperChainePHP = "test: $maBelleVariablePHP ";
?><html>
<script>
  var maVariableJS = 12;
  console.log(maVariableJS);
</script>
<h1>Hello</h1>
</html>

J'ouvre l'url avec le navigateur
le navigateur envoie une requête get /url/de/la/page.php
le serveur charge le script
il exécute la première ligne
il défini la variable maBelleVariablePHP
il défini la variable maSuperChainePHP
il crée le buffer de sortie.
il écrit

Code text :

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

1
2
3
4
5
6
7
<html>
<script>
  var maVariableJS = 12;
  console.log(maVariableJS);
</script>
<h1>Hello</h1>
</html>

il envoie le buffer au navigateur
il supprime toutes les variables
il supprime le contexte d'exécution du script
le navigateur reçois le texte

Code text :

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

1
2
3
4
5
6
7
<html>
<script>
  var maVariableJS = 12;
  console.log(maVariableJS);
</script>
<h1>Hello</h1>
</html>

il créer un DOM
il crée l'élément script
il crée l’élément h1
il crée le contexte d'exécution javascript
il charge dans l'interprète js le texte

Code text :

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

1
2
  var maVariableJS = 12;
  console.log(maVariableJS);

il parse la première ligne
il créé la constante 12
il créé la variable maVariableJS
il lui affect la valeur de la constante
il appelle la méthode log

tu vois dans cet exemple simple que les variables PHP n'existent pas dans JS et qu'elle ont été détruite avant que JS ne commence à s'éxécuter.

Tu vas me dire que j'ai fait exprès de pas passer mes variables PHP à Javascript
alors je te propose de refaire l'opération en passant une variable.

Code html :

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

1
2
3
4
5
6
7
8
9
10
<?php
$maBelleVariablePHP = 45;
$maSuperChainePHP = "test: $maBelleVariablePHP ";
?><html>
<script>
  var maVariableJS = '<?php echo $maSuperChainePHP ?>';
  console.log(maVariableJS );
</script>
<h1>Hello</h1>
</html>

J'ouvre l'url avec le navigateur
le navigateur envoie une requête get /url/de/la/page.php
le serveur charge le script
il exécute la première ligne
il défini la variable maBelleVariablePHP
il défini la variable maSuperChainePHP
il crée le buffer de sortie.
il écrit

Code text :

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

1
2
3
4
5
6
7
<html>
<script>
  var maVariableJS = 'test: 45';
  console.log(maVariableJS);
</script>
<h1>Hello</h1>
</html>

il envoie le buffer au navigateur
il supprime toutes les variables
il supprime le contexte d'exécution du script
le navigateur reçois le texte

Code text :

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

1
2
3
4
5
6
7
<html>
<script>
  var maVariableJS = 'test: 45';
  console.log(maVariableJS);
</script>
<h1>Hello</h1>
</html>

il créer un DOM
il crée l'élément script
il crée l’élément h1
il crée le contexte d'exécution javascript
il charge dans l'interprète js le texte

Code text :

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

1
2
  var maVariableJS = 'test: 45';
  console.log(maVariableJS);

il parse la première ligne
il créé la string 'test: 45'
il créé la variable maVariableJS
il lui affect la valeur de la string
il appelle la méthode log

Les variable php n'ont toujours pas d’existence dans JavaScript
le point important est donc le texte que ton serveur à produit pour que JS définisse les variables


A+JYT

[lcoulon]

Merci sekaijin ,

De ce fait, je dois initialiser chaque variable les unes apres les autres, n'est ce pas ?

Code :

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

val_variable = data["~sensor_favorite(1)~"];

Ce que je ne comprends pas, c'est que la boucle va appeler val_variable et celle ci fait appel à ~sensor_favorite(1)~ seulement et pas aux 9 autres .

Du coup, à quoi doit ressembler l'intégralité du code que je dois écrire si je veux qu'il fonctionne avec une boucle.

[NoSmoking]

Je ne suis pas sûr que tu lises les réponses jusqu'au bout, on attend encore

le point important est donc le texte que ton serveur à produit pour que JS définisse les variables

D'autre part

c'est que la boucle va appeler val_variable et celle ci fait appel à ~sensor_favorite(1)~ seulement et pas aux 9 autres .

je t'ais fourni un bout de code qui répond à ton questionnement, je le remets ci dessous

Code :

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

1
2
3
4
for( var i= 0; i < 10; i +=1){
    val_variable =  window["~sensor_favorite(" +i +")~"];
    console.log(val_variable);
}

Mais le plus troublant est

Si j'effectue un traitement individuelle ( sans boucle ), variable par variable comme ceci, cela fonctionne

Code :

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

<!--document.getElementById('FAV_1').innerHTML = '<img src="favorite_' + '~sensor_favorite(1)~' + '.png">';//-->

j'avoue que je commence à me noyer...il faudra que je relise à tête reposé la totalité de la discussion.

<mention class="spéciale">

<p>

à sekaijin pour avoir illustré le cheminement de ta page

</p>

<mention>