[JS] Problem avec onclick

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [JS] Problem avec onclick

Tentac

¤¤ In tartiflette we trust ¤¤

Bonjour, quelqu'un pourrait m'expliquer pourquoi ca ca marche :

Butts[1].onclick = function()
{
for (LC = 0; LC < Divs[1].length; LC++)
{
if(Divs[1][LC].style.display == 'block')
{Divs[1][LC].style.display ='none';}
else
{Divs[1][LC].style.display ='block';}
}
return false;
};

[etc....]

Butts[4].onclick = function()
{
for (LC = 0; LC < Divs[4].length; LC++)
{
if(Divs[4][LC].style.display == 'block')
{Divs[4][LC].style.display ='none';}
else
{Divs[4][LC].style.display ='block';}
}
return false;
};

et pas ca :

for (LC2 = 1; LC2 < 5; LC2++)
{
Butts[LC2].onclick = function()
{
for (LC = 0; LC < Divs[LC2].length; LC++)
{
if(Divs[LC2][LC].style.display == 'block')
{Divs[LC2][LC].style.display ='none';}
else
{Divs[LC2][LC].style.display ='block';}
}
return false;
};
}

en gros, dans le cas qui marche j'énumère de 1 à 4 ce qui est remplacé par LC2 dans la boucle for qui marche pas.

C'est assez fort quand meme. La je pédale dans la choucroute. La seule expliquation que j'oserait avancer, c'est que onclick ne marche pas bien dans un boucle (pourquoi, j'en sais rien), mais j'en sait trop rien.

A savoir que ca ne me cause pas d'erreur, mais que ca ne fait rien (alors que ca devrait faire la meme chose que quand j'énumère a la main.

Message édité par Tentac le 28-09-2005 à 02:54:29

---------------
"Ramon Balthazard ! Lachez cette arme !"

Publicité

gatsusat

normal, quand tu spécifie la function onclick sur l'élément

ben l'élément aura dans comme onclick :

Code :

Butts[LC2].onclick = function()
{
for (LC = 0; LC < Divs[LC2].length; LC++)
{
if(Divs[LC2][LC].style.display == 'block')
{Divs[LC2][LC].style.display ='none';}
else
{Divs[LC2][LC].style.display ='block';}
}
return false;
};

et donc quand tu vas cliquer sur l'élément, tu peux me dire ce que vaudra LC2 ? ben nan tu sais pas justement, c'esdt pour ca que ca marche pas

Tentac

¤¤ In tartiflette we trust ¤¤

a pas sur de très bien comprendre. Ce que tu veux dire, c'est que quand je vais cliquer sur un des éléments, le onclick n'a pas moyen de savoir ou il en est dans le for, et donc ne peut pas connaitre LC2 ?

Donc en gros ca veut dire que c'est DMC pour créer dynamiquement une liste de boutons (Butts[LC2]) cliquable. Donc que je suis obligé de tout énumérer a la main, c'est ca ?

---------------
"Ramon Balthazard ! Lachez cette arme !"

gatsusat

Faudrait que tu nous files tout le context de ton truc, genre la page HTML que tu as et le résultat que tu veux obtenir (un echantillon de 3 ou 4 boutons et DIV)
steuplééééééééééééééééééé

Tentac

¤¤ In tartiflette we trust ¤¤

pour les esquepliquations, c'est oversimple :
c'est dans mon système de news.
dans le tableau Butts[], il y a des divs qui ont chacun un ID différent, noté de 1 a n. (ce sont les boutons).
dans le tableau Divs[], il y a des listes de divs, dont la class est numéroté de 1 à n.

ce que c'est censé faire (et ca marche si j'énumère), c'est que quand je clique sur le bouton qui a l'id 2, (par exemple), ca va m'afficher ou me cacher la liste de divs Divs[2][] .

Dans ma boucle, le premier LC2 sert donc a énumérer les boutons , et a agir sur la liste de divs en conséquence.
Le LC sert ensuite a énumérer les divs de la liste en question (ben oui, j'ai plusieurs news de chaque classe).(cette partie marche bien).

je pourrait énumérer comme j'ai fait tout en haut pour le faire marcher, mais malheureusement, je connait pas le nombre de classe de news que je vais avoir a chaque fois, et je veux donc afficher que les boutons utiles (et accessibles, accessoiremement. les catégories accessibles dépendent du niveau de login).

Message édité par Tentac le 28-09-2005 à 15:53:24

---------------
"Ramon Balthazard ! Lachez cette arme !"

Tentac

¤¤ In tartiflette we trust ¤¤

l'application est la : http://www.choucroute-network.net/
va dans news, en haut tu as les boutons type 1 à 4 (c'est juste du texte). En les utilisant tu peux faire apparaitre/disparaitre les news correspondantes.
La c'est la version énumérée a la main, donc qui marche.

edit : ne pas faire gaffe aux alertes js, c'est pour moi (du débug).

Message édité par Tentac le 28-09-2005 à 15:59:28

---------------
"Ramon Balthazard ! Lachez cette arme !"

gatsusat

Voici le joli code tant attendu,
et la tu n'as même pas besoin d'énumérer les catégories à la main, elles sont automatiquement rajoutées.
J'utilise une méthode que le validateur W3C va pas forcément aimer, mais c'est valide si tu passes ta page en xHTML (mais en HTML ca marche pareil)
les catégories on l'attribut Cat, tout simplement
mais à la rigueur tu peux la remplacer par class.
ca fera l'affaire tout autant

avec l'exemple ici : http://gatsu.ftp.free.fr/html/showhideCat.html

mais il y a un truc que je pige pas dans la console de firefox j'ai ce message :

Code :

Erreur : [Exception... "'Error: No menu commaner found for URL: file:///D:/__css/pagetest.html' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)" location: "<unknown>" data: no]

Si quelqu'un pouvait m'éclairer ?

Bon voici le code. Normalement devrait pas y avoir d'erreur, il me semble très propre

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
#NewsFilter A {
margin: 0 5px;
}
</style>
<script>
function FilterNews() {
var NewsCats = new Array;
var NouvelleCat;
//On récuprèe d'abord les 2 gros blocs
var News = document.getElementById("News" );
var NewsFilter = document.getElementById("NewsFilter" );
//On va scanner le bloc de news afin de récupérer toutes les catégories de news différentes.
var TheNews = News.getElementsByTagName("DIV" ) //On recupère tous les DIV contenus dans News
//On va fouiller à la recherche des DIV qui contiennent une catégorie
for (var i=0; i<TheNews.length; i++) {
var Cat = TheNews[i].getAttribute("cat" )
NouvelleCat = true //On part du principe que chaque categorie rencontrée est nouvelle
if (Cat!="" ) { //Si le Div contient l'attribut cat
//On rajoute la catégorie dans un tableau
if (NewsCats.length>0) { //Si le tableau est vide la catégorie est systématiquement nouvelle
//On regarde si la categorie existe ou non
for (var j=0; j<NewsCats.length;j++) {
if (NewsCats[j]==Cat) {
NouvelleCat = false; //La categorie n'est pas nouvelle
break; //On sort de la boucle
}//end if
}//end for j
}//end if
if (NouvelleCat) { //Si la categorie est nouvelle
NewsCats.push(Cat); //On rajoute la nouvelle categorie
}//End if
}//End if
}//End for j
//Maintenant nous avons un tableau de categories, il va falloir afficher ce tableau sous forme de lien ans le bloque NewsFilter
NewsCats.sort() //On trie les categories par ordre alphabetique
//On va afficher les news dans le bloque maintenant
for (i=0; i<NewsCats.length; i++) {
var LienA = document.createElement("A" ); //On rajoute un lien A
LienA.href = "#"; //On lui rajoute un Href bidon afin qu'il soit bien considéré comme un A dans tous les navigateurs
var AValue = document.createTextNode(NewsCats[i]) //On créé le texte du A
LienA.appendChild(AValue) //On rajoute le text à A
LienA.onclick = function() { //On rajoute une fonction sur le onclick de ce A
//Cette fonction est autonome du code précédent, car elle sera appelée à chaque fois que on cliquera sur LienA
//Donc on doit refaire certaines actions
var News = document.getElementById("News" );
//On va fouiller à la recherche des DIV qui contiennent une catégorie
for (var i=0; i<TheNews.length; i++) {
var Cat = TheNews[i].getAttribute("cat" )
TheNews[i].style.display = (this.firstChild.nodeValue==Cat) ? "block" : "none"; //on cache ou on affiche un élément si celui ci correspond à la catégorie
} //end for
return false; //On empeche le lien de s'activer
} //end onclick
//On rajoute ce nouveau lien A dans le bloc
NewsFilter.appendChild(LienA);
} //end for
//On rajoute un lien pour afficher toutes les news
var LienA = document.createElement("A" ); //On rajoute un lien A
LienA.href = "#"; //On lui rajoute un Href bidon afin qu'il soit bien considéré comme un A dans tous les navigateurs
var AValue = document.createTextNode("Toutes les news" ) //On créé le texte du A
LienA.appendChild(AValue); //On rajoute le text à A
LienA.onclick = function() { //On rajoute une fonction sur le onclick de ce A
var News = document.getElementById("News" );
for (var i=0; i<TheNews.length; i++) {
TheNews[i].style.display ="block";
} //end for
return false; //On empeche le lien de s'activer
} //end onclick
//On rajoute ce nouveau lien A dans le bloc
NewsFilter.appendChild(LienA);
} //End function
window.onload = function() {
FilterNews();
}
</script>
</head>
<body>
<div id="NewsFilter"></div>
<div id="News">
<div cat="News">
cat news
</div>
<div cat="Informatique">
cat info
</div>
<div cat="Fromage">
cat fromage
</div>
<div cat="Informatique">
cat info
</div>
<div cat="Politique">
cat Politique
</div>
<div cat="Cinema">
cat Cinema
</div>
<div cat="Cinema">
cat Cinema
</div>
</div>
</body>
</html>

Message édité par gatsusat le 28-09-2005 à 21:07:17

Tentac

¤¤ In tartiflette we trust ¤¤

oué, t'as pas pris la meme approche que moi (toi tu fait de la création dynamique dans le code, alors que perso tout est dans un fichier js a coté).
Ca m'empèche de créer des éléments a la volée comme tu le fait.
Dans mon code, les divs des boutons et des news sont générés dynamiquement en php, en fonction du niveau d'identification, etc...

ensuite le js est censé récupérer tout ca, browser mon code, en extraire le tableau de boutons et le tableau de liste de news correspondant, et afficher tout ce joli monde ensuite selon les clics.

je constate que toi aussi tu as collé un onclick sur un élément créé dans une boucle. Ou est la différence avec mon code dans ce cas ? Le fait que tu sois dans la page meme, alors que moi la page est déja créée ? J'ai un peu de mal a capter, la.

Je comprend bien ton code et les méthodes que tu as choisie, mais je comprend mal pourquoi dans ta boucle a toi, le onclick sait ou il en est alors que dans le mien il est largué)

edit : merci de consacrer autant d'attention a mon problème, mais fallait pas te sentir obligé de pondre un exemple complet...

Message édité par Tentac le 28-09-2005 à 21:37:22

---------------
"Ramon Balthazard ! Lachez cette arme !"

gatsusat

PS : sert toi de mon code je pense que c'est la meilleure méthode en soit.
tu peux aussi le mettre dans un JS à coté, tout sera automatiquement rajouté de toute manière, j'ai tout collé dans la même page afin que tu te rende compte de la chose.

Bon ok pour le PHP, mais ca m'a l'air d'être un sacré gros bazar ton code. alors que là je me suis ultra simplifié la vie.

Pour en revenir à ton onclick qui est largué je vais texpliquer :
Comme moi tu as un code qui genère les onclick à la volée.
Mais dans ton gros bloc de code, tu as une variable (LC2) qui se balade.
tu rajoute dans ton onclick une fonction contenant LC2

MAIS admettons que dans ton onclick tu as juste ca :
alert(LC2);

au moment ou tu rajoutes cette ligne dans la fonction onclick, javascript ne va pas coller la valeur de LC2
ex :

Code :

LC2 = 45;
truc.onclick = function() {
alert(LC2);
}
LC2++

en admettant que je n'ai que ca comme code
Quand je vais cliquer sur LC2, je n'aurai pas 45 comme resultat, mais 46, car quand tu génère un onclick
la fonction va pas te mettre alert(45) mais bien alert(LC2).

Mais moi je me sers d'une value de mon objet lui-même, cette value étant le type de catégorie que tu veux afficher.
et donc avec un this.macat j'ai ma valeur.

Tentac

¤¤ In tartiflette we trust ¤¤

ok capté, comme onclick est une nouvelle fonction, la valeur d'une variable externe n'est pas récupéré, en fait c'est logique.
Donc en fait, dans mon code, le onclick s'effectue bien sur le bon élément, mais c'est dans la fonction qu'il "perd" la valeur de LC2 et ne sait donc plus quoi en faire.

Faut en fait que je trouve une méthode pour récupérer ma variable a l'intérieur de la fonction onclick.

Sinon pour info, mon code c'est pas tellement le bordel, c'est juste que je préfère pas générer de html dans mon js, vu que j'en génère déja bien assez dans mon php. De plus, je vais aussi m'arranger pour que mon site puisse fonctionner sans js, et générer du html dans mon js ne me faciliterait pas la tache...

---------------
"Ramon Balthazard ! Lachez cette arme !"

Publicité

gatsusat

ben JS intrusif c'est lavenir

www.c-sait.net

desactive le JS (weddevelopper bar sous FF)
tu verras le site est pareil et fonctionnel, mais avec du JS il est magique (cf menu de gauche ou tu peux bouger les blocs)

Tentac

¤¤ In tartiflette we trust ¤¤

pour info le début du code js c'est ca :

Code :

var DIVcoll = document.getElementsByTagName('div');
var LC,LC2;
Divs = new Array();
Butts = new Array();
for (LC2 = 1; LC2 < 5; LC2++) //je récupère tous mes types de boutons/news
{
Divs[LC2] = new Array();
Butts[LC2] = new Array();
Butts[LC2] = document.getElementById('btype'+LC2);
}
for (LC2 = 1; LC2 < 5; LC2++) //pour chaque cat' ....
{
for (LC = 0; LC < DIVcoll.length; LC++) // je parcours toutes les news...
{
if (DIVcoll[LC].className == 'type'+LC2) //et si la news est dans la bonne cat, je la met dans le tableau qui va bien
{
DIVcoll[LC].style.display = 'block';
Divs[LC2][Divs[LC2].length] = DIVcoll[LC];
};
};
}

ya moyen de simplifier ca encore, mais bon la j'essaie simplement de faire marcher le tout proprement.

---------------
"Ramon Balthazard ! Lachez cette arme !"

gatsusat

pourquoi ne pas utiliser mon code ? là tu te complique la vie pour rien du tout !

Code :

for (LC2 = 1; LC2 < 5; LC2++) //je récupère tous mes types de boutons/news
{
Divs[LC2] = new Array();
Butts[LC2] = new Array();
Butts[LC2] = document.getElementById('btype'+LC2);
}

surtout là ou ca foire un peux pourquoi vouloir faire des tableaux de tableaux ?

alors que en englobants tous les éléments dans un bloc
et en faisant monbloc.getElementsByTagName("DIV" ), tu recuperes un tableau de tous tes DIV

ya une erreur de conception quelque part là !

Tentac

¤¤ In tartiflette we trust ¤¤

je capte pas trop ou tu vois un problème...
je récupète tous mes éléments ayant un id de type "btypen", je les met dans un tableau, c'est mes boutons.
je fait de meme pour mes news, selon leur classe de type "typen", je les met dans un tableau.

je vois pas ce qui est une erreur de conception la dedans, et pourquoi ca me complique particulièrement la vie. C'est le fait que mes cats soient des numéros ? c'etait voulu a la base, c'est pour rendre l'exploitation plus facile dans mon php.

---------------
"Ramon Balthazard ! Lachez cette arme !"

gatsusat

le truc c'est que je ne vois pas pourquoi tu les mets dans un tableau
alors qu'avec les méthodes du DOM (getElementByTagName, puis un monobjet.id.indexof("type" )) tu peux t'occuper de tous tes éléments.

Tentac

¤¤ In tartiflette we trust ¤¤

ca marche, juste en rajoutant un
LC2 = this.id.substring(5);
dans mon onclick, pour récupérer mon LC2.
Je comprend les méthodes que tu me proposes, mais je vois pas en quoi elles sont mieux/plus simple.
En terme de lignes de codes ca se vaut.

le seul truc que mon code ne fait pas, c'est récupérer automatiquement les cats, mais ca je suis en train de le faire, et c'est pareil, pa prend pas plus de 5 lignes

merci quand meme pour le coup de main.

Message édité par Tentac le 28-09-2005 à 22:45:55

---------------
"Ramon Balthazard ! Lachez cette arme !"

gatsusat

ben mon code il est peut etre long, mais c'est super clean
on s'en fout que le code fasse 5 lignes s'il est incomprehensible et tout pourri.

Là il est pas long, j'utilise juste les methodes du DOM a ma sauce et proprement

gatsusat

tu adapterai le code que je t'ai donné, tu t'en sortirai mieux

Tentac

¤¤ In tartiflette we trust ¤¤

en fait, j'ai refait en encore plus simple:

Code :

var LC,LC2,name,num;
News = document.getElementsByTagName('div');
Butts = getElementsByClassName('butt');
for (LC2 = 0; LC2 < Butts.length; LC2++)
{
Butts[LC2].onclick = function()
{
num = this.id.substring(5);
for (LC = 0; LC < News.length; LC++)
{
name = News[LC].className;
if(name == "type"+num)
{
if(News[LC].style.display == ''){News[LC].style.display ='block';}
if(News[LC].style.display == 'block'){News[LC].style.display ='none';}
else{News[LC].style.display ='block';}
}
}
return false;
}
}

j'ai juste du coder la fonction get ElementByClassName, qui étrangement n'existe pas (c'est con quand meme, ca peut etre utile....)

Code :

function getElementsByClassName( clsName )
{
var arr = new Array();
var elems = document.getElementsByTagName("*" );
for ( var cls, i = 0; ( elem = elems[i] ); i++ )
{
if ( elem.className == clsName )
{
arr[arr.length] = elem;
}
}
return arr;
}

---------------
"Ramon Balthazard ! Lachez cette arme !"

FORUM HardWare.fr

Programmation

HTML/CSS

[JS] Problem avec onclick

Sujets relatifs
Problem Graph Np complet, casse tete	Problem de Setup ( Install )
OnClick et texte ?	erreur bizarre avec onclick et onload
onclick, visibility....	Problem de str_replace()
[HELP] select/option/ et onClick/onBlur...	problem lecture d un fichier texte !!
[Javascript] onClick, la valeur d'une balise input est renseignée	Problème de onclick sous IE
Plus de sujets relatifs à : [JS] Problem avec onclick

Page générée en 0.119 secondes