11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu][Débutant - DOM/JS] Faire apparaitre un paragraphe...

Salut tout le monde,

Voilà c'est tout bête (enfin j'imagine :S), mais j'aimerai faire apparaitre, à l'aide d'un script js, un paragraghe sur ma page HTML associée (qui à l'origine est vierge, c-à-d rien entre les balises body excepté un lien).

Ce paragraphe devra s'afficher une fois aprés avoir cliqué sur un lien (qui aura également pour effet de changer le nom du lien), et devra être masqué si je reclique sur ce lien.

J'y arrive pas du tout, quelqu'un pourrait m'aider, svp.


PS: J'espère que j'en demande pas trop, mais mon but est de comprendre ce qui est à faire donc si vous pouviez me filer des explications avec les bouts de code, ce serait trés aimable, merci.
Modifié par JRM (16 Feb 2006 - 20:46)
Tiens, si tu veux apprendre un peu javascript, je te conseille deux liens, ce sont des exercices que j'ai du faire pour l'école l'année dernière, et le code est commenté.

Je sais qu'il y avait un ou deux exos du style de ton problème dedans (ou qui utilisent le même principe), alors parcours ça à ton aise, lis bien les commentaires dans les codes, et ça devrait t'aider:

JS - Dossier 1
JS - Dossier 2 - le dossier 2 est moins commenté because j'avais moins le temps à ce moment-là et que ça reste de toutes façons assez compréhensible une fois qu'on a bien suivi les trucs précédents...

Amuse-toi bien... Smiley cligne
Modifié par Lisarael (15 Feb 2006 - 11:28)
chmel a écrit :
Bonjour,
Tu peut aussi t'inspirer du message précédent le tien dans ce forum



En effet ça marche bien, la différence c'est que lui, part d'une div déjà présente dans sa page HTML, moi je dois créer mon paragraphe... Smiley confus
JRM a écrit :



En effet ça marche bien, la différence c'est que lui, part d'une div déjà présente dans sa page HTML, moi je dois créer mon paragraphe... Smiley confus


C'est moins simple, tu ne peut le faire qu'en dynamique DOM
Je tâtonne, je tâtonne ...

je suis arrivé à faire ça:
//HTML
<body>
	<a href="javascript:para();">afficher</a>
</body>

//SCRIPT JAVASCRIPT
function para()
{
	var para = document.createElement("p");
	
	var contenu_para = document.createTextNode("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam consequat, mi vulputate dapibus hendrerit, velit 	sem cursus elit, faucibus semper tortor lacus in risus. Donec placerat est eu justo. Sed cursus fringilla dui. Suspendisse sollicitudin elit feugiat mi. Integer non nibh. Aenean scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam bibendum venenatis risus. Nunc lectus enim, congue et, gravida in, varius in, urna. Suspendisse sed purus. Donec ultricies mauris at erat accumsan pharetra. Suspendisse malesuada pellentesque felis. Nam vitae sapien ut augue suscipit ultricies. Mauris convallis nisl nec justo. Cras quis metus ac leo ornare tristique.");
	
	para.appendChild(contenu_para);
	
	var page = document.getElementsByTagName("body")[0];
 	page.appendChild(para);
	
	var style = document.createAttribute("style");
    	style.nodeValue = "display:";
	var style_para = document.getElementsByTagName("p")[0];
    	style_para.setAttributeNode(style);
}


ça m'affiche bien le paragraphe mais :
- le lien qui se nomme "afficher" doit s'appeler "masquer" une fois qu'on a cliqué dessus, et vice-versa
- lorsqu'on reclique sur le lien (qui s'appelle donc masquer) celui-ci doit donc masquer le paragraphe...

pour ça j'ai essayé d'utilisé l'attribut style="display:none" et style="display:" mais j'y arrive pô...

une aide pour une piste à suivre... Smiley confused
Je n'ai pas testé :
Juste après 
var page = document.getElementsByTagName("body")[0];

tu remplaces ce qui suit par :
if(this.firstChild.data=="afficher")
{this.firstChild.data="masquer";page.appendChild(para)}	
else {this.firstChild.data="afficher";page.removeChild(para)}

Je ne suis pas sur de la syntaxe removeChild, mais on en a parlé sur ce forum ces derniers jours
Modifié par chmel (16 Feb 2006 - 00:33)
Bon ! ça marche au moins une fois, je te laisse trouver la suite Smiley lol 
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function para(x)
{
	var page = document.getElementsByTagName("body")[0];

if(x.firstChild.data=="afficher")
	{	
	var para = document.createElement("p");

	var contenu_para = document.createTextNode("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam consequat, mi vulputate dapibus hendrerit, velit 	sem cursus elit, faucibus semper tortor lacus in risus. Donec placerat est eu justo. Sed cursus fringilla dui. Suspendisse sollicitudin elit feugiat mi. Integer non nibh. Aenean scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam bibendum venenatis risus. Nunc lectus enim, congue et, gravida in, varius in, urna. Suspendisse sed purus. Donec ultricies mauris at erat accumsan pharetra. Suspendisse malesuada pellentesque felis. Nam vitae sapien ut augue suscipit ultricies. Mauris convallis nisl nec justo. Cras quis metus ac leo ornare tristique.");
	
	para.appendChild(contenu_para);
	page.appendChild(para);	
	x.firstChild.data="masquer";
	}
else 
	{
	x.firstChild.data="Afficher";
	page.removeChild(page.getElementsByTagName('p')[0])
	}	
}
//-->
</script></head>
<body>
	<a href="#" onclick="para(this);">afficher</a>
</body></html>


Ne pas utiliser tel quel car le paragraphe n'est pas accessible à ceux qui n'ont pas javascript Smiley cligne
Modifié par chmel (16 Feb 2006 - 09:35)
merci chmel Smiley biggrin
Sinon si ça ne marche qu'une seule fois c'est normal, comme t'as mis "Afficher" une fois avec majuscule et l'autre sans. J'ai changé et c'est nickel Smiley cligne

encore merci.
Sujet clos
Aller à