Tester un evenment

03 janv. 2010, 20:49

Hello

je souhaite masqué ou afficher un paragraphe des articles de ma page tout en laissant le titre afficher en cliquant sur le titre h1

Mais je n'arrive pas à retourné l'element depuis la fonction getElement !

voici un bout de ma page :

Code : Tout sélectionner

<div class="article" id="1">
<h1>title</h1>
<p>Mon paragraphe</p>
</div>

Mon code Javascript :

Code : Tout sélectionner

	function addEvent(obj,event,fct)
	{
		if(obj.attachEvent)
		{
			obj.attachEvent('on' + event,fct);
		}
		else
		{
			obj.addEventListener(event,fct,false);
		}
	}


	function $(id)
	{
		return document.getElementById(id);
	}


	function getElement()
	{
		var container = $('container');
		var tags	  = container.getElementsByTagName('div');

		for(var i = 0; i<= tags.length; i++)
		{
			if(tags[i].childNodes[1].click)
			{
				var e = tags[i].childNodes[1];
			}
		}

		return e;
	}


	function hide()
	{
		alert('hide test ');
	}


	var addOnLoad = function(event)
	{
		addEvent(getElement(), 'click', hide);
	};


	addEvent(window, 'load', addOnLoad);

Merci pour votre aides.

03 janv. 2010, 21:23

J'ai pas trop regardé ton code javascript que je trouve un peu compliqué pour ce que tu veux faire, mais déjà il y a une erreur dans ton code html car un id doit toujours commencer par une lettre (que tu peux incrémenter ensuite par des nombres si tu le souhaite).

03 janv. 2010, 21:43

Merci je vais donc ajouter un prefix je ne connaissais pas cette info !

mon id sera maintenant

Code : Tout sélectionner

<div class="article" id="article-1">dosomething etc...</div>

Pour ce qui est du code j'ai mis les fonctions que j'utilise pour cette action mais elle ne servent pas qu'à ça.
j'ai des fonctions d'animation genre slide up et down et autre et mon but pour le moment c'est du faire du dom > 0 lool
et je veux me familiarisé avec les évènements.

ça me permet de m'entrainer mais si tu as plus simple dans le genre pourquoi pas mais moi je ne vois pas...
J'ai déjà eu du mal à me mettre à javascript !

04 janv. 2010, 00:06

S'il s'agit simplement de pouvoir afficher puis de pouvoir masquer un paragraphe en cliquant sur son titre, pour moi le plus simple est une solution de ce genre :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>

<script type="text/javascript">
function Affiche_paragraphe(id)
{
this.change_statut = (typeof this.change_statut == 'undefined') ? Array() : this.change_statut;

this.change_statut[id] = (typeof this.change_statut[id] == 'number')? this.change_statut[id] * (-1) : -1;

if (this.id = document.getElementById(id))
	{
	this.id.style.display = (this.change_statut[id] == -1)?  'block' : 'none';
	}
}
</script>

<style type="text/css">
.cache {
display : none;
}
h1 {
cursor:pointer;
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
}
</style>

</head>

<body>

<div>
<h1 onclick="Affiche_paragraphe('article_1')">title 1</h1>
<p id = "article_1" class = "cache">Mon paragraphe 1</p>
</div>

<div>
<h1 onclick="Affiche_paragraphe('article_2')" style="cursor:pointer">title 2</h1>
<p id = "article_2" class = "cache">Mon paragraphe 2</p>
</div>

</body>
</html>

Avec php on peut facilement générer automatiquement des blocs comme ceux donnés en exemple.

04 janv. 2010, 00:41

Merci pour ton aide !

je connaissais plus ou moins cette méthode mais quand on lit des bouquins on nous dis que maintenant faut faire du DOM 2 et de la gestion
des évènements avec AddEventListener... Bref le javascript ca me fatigue parfois lool.

j'ai vu dans ton code ceci :

Code : Tout sélectionner

this.change_statut = (typeof this.change_statut == 'undefined') ? Array() : this.change_statut;

le this.change_statut ?
on peut créer un attribut un peu comme en objet si je comprend bien ?

est comme si on avait fait var change_statut = .... ?

++

04 janv. 2010, 03:23

Merci pour ton aide !
je connaissais plus ou moins cette méthode mais quand on lit des bouquins on nous dis que maintenant faut faire du DOM 2 et de la gestion des évènements avec AddEventListener... Bref le javascript ca me fatigue parfois lool.

Oui parce qu'il est "propre" de séparer les comportements (donc les évènements javascript) de la structure XHTML. Mais bon quitte à déplaire à certains puristes je dirai pour ma part que ce n'est pas ma priorité car j'ai plus urgent à faire, surtout que dans bien des cas on ne gagne rien d'autre que de l'esthétisme intellectuel.

Bien entendu je n'ai rien contre cette méthode, mais j'ai simplement du mal à comprendre, comme apparemment le dit ton livre, que cela puisse être un préalable à l'initiation à javascript

... on ne doit pas avoir le même sens des priorités.

Code : Tout sélectionner
this.change_statut = (typeof this.change_statut == 'undefined') ? Array() : this.change_statut;
le this.change_statut ?
on peut créer un attribut un peu comme en objet si je comprend bien ?

est comme si on avait fait var change_statut = .... ?
++

Le this dans ce cas est pour rendre ma variable globale car j'aime bien ne pas avoir de variables en dehors de la fonction.
L'équivalent sans this est :

Code : Tout sélectionner

var change_statu;
 
function Affiche_P(id)
{
change_statu = typeof change_statu == 'undefined' ? Array() : change_statu;

change_statu[id] = (typeof change_statu[id] == 'number')? change_statu[id] * (-1) : -1;

var paragraphe = document.getElementById(id);

if (paragraphe)
	{
	paragraphe.style.display = (change_statu[id] == -1)?  'block' : 'none';
	}
}

04 janv. 2010, 05:12

Merci pour ce supplément d'infos !

En effet ce n'est visiblement pas une priorité je suis tout à fais d'accord avec toi !

C'est juste que quand on est débutant dans le domaine on veux faire bien et on à tendance à cherché le petit le petit détails qui sera au top lool

Mais pour ce genre de truc c'est vrai que c'est pas le plus important ! en revanche je vais faire un peu plus de DOM car je trouve ça super intéressant
même si c'est pas évident au début...

++

04 janv. 2010, 11:19

Mais pour ce genre de truc c'est vrai que c'est pas le plus important ! en revanche je vais faire un peu plus de DOM car je trouve ça super intéressant
même si c'est pas évident au début...
++

Oui, c'est plutôt comme ça que je le vois : avant de s'intéresser à l'externalisation des évènements javascript (ce qui n'est pas le plus simple) le pré requis est de bien connaître le DOM

Sinon concernant la gestion des évènements javascript tu as aussi de la doc ici http://www.alsacreations.com/article/li ... cript.html

06 janv. 2010, 13:32

Salut à tous deux ...

Si vous me permettez une intrusion, perso j'avais un peux de mal à faire des "codes propre" bien structurés, et respectueux des normes et indications jusqu'à ce que je découvre la lib prototype qui, franchement simplifie bien les choses quand on souhaite concevoir intégralement son script (sans utiliser des bout de codes trouvés par-ci par-là) ...

déclaration d'un objet en charge d'effectuer des opérations (noms contenu dans l'atribut "rel" sur les liens contenant une class "link" :

Code : Tout sélectionner

<script type="text/javascript">
var ObjEvent = Class.create({
  initialize : function(){
    $$('.link').invoke('observe', 'click', this.GestionEvent.bindAsEventListener(this);
  },
  gestionEvent : function(event){
    event.stop();
    var element = event.element();
    if(this[element.rel] != undefined)
      this[element.rel](element);
    else
      window.location = element.href;
  },
  loadAjax : function(element){
    Ajax.Request(element.href, {onComplete : function(xhr){alert(xhr.responseText)}});
  },
  alertContent : function(element){
    alert(element.innerHTML);
  }
});
document.observe('dom:loaded', function(){ new ObjEvent();});
</script>
<a class="link test" rel="loadAjax" href="mapage.html">aficher le contenu de mapage.html en alert()</a><br/>
<a class="link" rel="alertContent" href="#">afficher ceci dans une alert()</a><br/>
<a class="lienNormal" href="maPage.html">lien à comportement normal</a>

Bon, j'ai fais ça rapidement pour illustrer ... je sais que je ne vous aprendrez ri_en avec un tel exemple, mais, juste pour dire, que pour aprendre il est parfois trés utile et Gratifiant d'aprendre avec une lib comme celmle ci, qui facilite déja bien les choses à la base ... mais ceci n'est que mon avis !...

@+&BonCode

06 janv. 2010, 16:55

... mais, juste pour dire, que pour aprendre il est parfois trés utile et Gratifiant d'aprendre avec une lib comme celmle ci, qui facilite déja bien les choses à la base ... mais ceci n'est que mon avis !...
@+&BonCode

Ben le problème est là justement... je ne crois pas qu'on puisse réellement apprendre à programmer en commençant par utiliser des lib. D'une part comme le code interne est optimisé, il est souvent pratiquement incompréhensible surtout pour un débutant, d'autre part en utilisant une lib on emploi des mots réservés ou des syntaxes qui ne font pas partie du langage lui-même et donc qui peuvent être également déroutantes pour un débutant (et si tu change de lib il faudra réapprendre d'autres conventions).
C'est pourquoi je suis plutôt pour dire qu'il est nécessaire d'avoir déjà un bon niveau avant d'utiliser une lib, sinon on peut devenir prisonnier des exemples documentés...

Tester un evenment

Qui est en ligne