+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu]Problème de changement de contenu de <div> avec JS (/showthread.php?tid=3574)
[Résolu]Problème de changement de contenu de <div> avec JS - emaia - 21-01-2009
Bonjour à tous,
Je viens ce soir quémander l'aide des membres de ce forum parce qu'il se trouve que je reste en pleine incompréhension face au problème qui s'oppose à moi.
Pour expliquer rapidement le principe, c'est un tout petit code en javascript qui consiste à changer le "display" ainsi que le contenu des certains <div> en fonction de la demande de l'utilisateur. Plus précisément ce dernier choisi d'afficher soit les bâtiments d'une race soit ceux d'une autre race (en l'occurrence elfes et humains).
Le problème survient lorsque l'utilisateur ayant déjà affiché les bâtiments d'une certaine race, décide maintenant de voir les bâtiments de l'autre race. Il se trouve que les bâtiments se superposent alors qu'ils ne devraient pas puisque j'ai gardé en mémoire dans un <div> invisible la valeur de la race précédente et que dans ma fonction d'affichage cette dernière est censée être supprimée. De plus je remarque que uniquement la valeur 'Hu' est retenue et celle de 'El' ne passe jamais dans le <div> invisible, étrange...
Ma fonction javascript :
Code :
function ShowMap(race){
var urlBase = '../images/bat_';
raceOLD = document.getElementById('raceOLD');
for (i=1;i<=2;i++){
/* On affiche la race choisie. */
document.getElementById('bat_'+race+'_0'+i).style.display = '';
document.getElementById('img_'+race+'_0'+i).src= urlBase+race+'_0'+i+'_01.gif';
if(raceOLD.length != 0)
{
/* On supprime la dernière race pour qu'il n'y ait pas de superposition. */
document.getElementById('bat_'+raceOLD+'_0'+i).style.display = 'none';
}
}
/* La race venant d'être sélectionnée devient la race à supprimée lors d'un prochain choix. */
document.getElementById('raceOLD').innerHTML = race;
}Mon code html :
Code :
<div id="bat_Hu_01" style="display:none;">
<img id="img_Hu_01" src="">
</div>
<div id="bat_Hu_02" style="display:none;">
<img id="img_Hu_02" src="">
</div>
<div id="bat_El_01" style="display:none;">
<img id="img_El_01" src="">
</div>
<div id="raceOLD" style="display:none;">
</div>
<select name="race" id="liste" onChange="ShowMap(this.value)">
<option value="Hu">Humain</option>
<option value="El">Elfe</option>
</select>Peut-être n'ai-je pas été suffisamment clair, mais en tout cas merci d'avance.
Cordialement, emaia.
RE: Problème de changement de contenu de <div> avec JS - Anthor - 21-01-2009
Déjà tu ne peux pas avoir i dans la fonction for et j à l'intérieur de sa boucle..
RE: Problème de changement de contenu de <div> avec JS - Ruz - 21-01-2009
tu gardes la valeur de l'ancienne race dans une div invisible...
euh, ouais...
t'utilises JS pour faire ca?
Parce que bon, en version plus simple: garde la valeur dans une variable... je comprends pas (a priori) l'utilité de ta div invisible...
sinon, idem... i/j
indentation imparfaite, et code volontairement simplifié, j'espère...
D'autre part, je pense que tu t'amuses à modifier la src des images en fonction des trucs affichés... pourquoi?
si affiché.. ca s'affiche, sinon pas... tu fais pas un peu deux fois le meme truc? (faire disparaitre un truc masqué...)
J'ai l'impression que tu te compliques pas mal la vie...
Perso, une DIV unique.. et je modifie l'image si nécessaire.
Enfin, je pense que je suis à coté de la plaque sur quelque chose... trop lourd pour si peu, ca me titille.
RE: Problème de changement de contenu de <div> avec JS - Anthor - 21-01-2009
C'est effectivement l'artillerie lourde pour ce que tu sembles faire.
Mais chaque chose en son temps
RE: Problème de changement de contenu de <div> avec JS - emaia - 21-01-2009
Merci à vous tous,
Tout d'abord j'ai mis i dans la déclaration de for et j à l'intérieur à cause d'une erreur de copie. De plus le code a en effet été simplifié d'où peut être votre incompréhension (chaque div à une place en absolu associé).
Sinon j'avais déjà essayé avec une variable mais des problèmes sont survenus et ne comprenant de quoi ils étaient fait (peut-être une simple erreur de syntaxe), j'ai changé de technique et je me suis rapatrié sur les <div>.
Voilà je pense avoir répondu à vos interrogations.
RE: Problème de changement de contenu de <div> avec JS - Ruz - 22-01-2009
bah, conseil: cherche l'erreur de syntaxe suspectée... c'est comme ca qu'on apprend le mieux ^^
RE: Problème de changement de contenu de <div> avec JS - Findel - 22-01-2009
Il y a plusieurs soucis.
Le premier est que raceOLD est un DIV, pas vraiment fait pour stocker des données javascript. Par exemple, lors de ton premier passage, son .length est différent de 0 puisque le div contient un retour à la ligne.
Je te conseille donc de mémoriser raceOLD dans une variable, par exemple :
Code :
var raceOLD = '';
function ShowMap(race){
var urlBase = '../images/bat_';
for (i=1;i<=2;i++){
/* On affiche la race choisie. */
document.getElementById('bat_'+race+'_0'+i).style.display = 'block';
document.getElementById('img_'+race+'_0'+i).src= urlBase+race+'_0'+i+'_01.gif';
if(raceOLD != '')
{
/* On supprime la dernière race pour qu'il n'y ait pas de superposition. */
document.getElementById('bat_'+raceOLD+'_0'+i).style.display = 'none';
}
}
/* La race venant d'être sélectionnée devient la race à supprimée lors d'un prochain choix. */
raceOLD = race;
}Ensuite, il y a plusieurs erreurs à l'execution, notamment lorsqu'on essai d'accéder à un El_02 (le div puis le img), qui n'existent pas, du moins dans la portion de code que tu nous donne.
Ensuite, il vaut mieux utiliser un .display = 'block' plutot qu'un .display = '', car avec une chaine vide c'est l'héritage qui rentre en compte
RE: Problème de changement de contenu de <div> avec JS - emaia - 22-01-2009
Merci de ton aide,
Le problème est réglé en utilisant une variable au lieu d'un div.
Cordialement, emaia.