DOM

Exercice

Sujet résolu

7 mai 2010 à 16:45:56

Bonjour !

Je suis un peu en galère pour un exercice que nous a demandé un professeur

Voilà son mail :

Tout en javascript

faire un un nuage de <div> placés aléatoirement sur la page( un nuage de
100 <div>) . Quand on clique sur un, il disparait:

(voir creatElement,appendChild, removeChild, getElementById().onclick)

C'est tout

J'ai déjà essayer quelques petit truc mais rien de très convainquant...

Je ne comprends pas pourquoi ma fonction de marche pas :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	
		<title> Javascript </title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="Content-Language" content="fr" />
		
		<style type="text/css">
		
		<!--
		
		body			{ margin: 0; padding: 0; background: #232323; }
		div.tutu		{ width: 30px; height: 30px; background: #ffffff; display: block; cursor: pointer; position: relative; margin: 2px; }
		
		-->
		
		</style>
		
		<script type="text/javascript">
		
		// Cache la div
		
		<!--
		
		function disparu() {
			
			document.getElementsByTag('div').style.display="none";
			
		}
		
		//-->
		
		</script>
		
	</head>
	<body>
	
	<div class="tutu" onclick="disparu();"></div>
	
	</body>
</html>

Et j'aimerais aussi savoir comment faire les fonction pour placer 100 divs aléatoirement...

Merci de votre aide !

Mario"

foxer90

7 mai 2010 à 17:21:24

Bonsoir,

La fonction document.getElementsByTag renvoit un tableau contenant tous les DIV (dans ton cas).
Tu devrais utiliser document.getElementById('monDiv') et mettre un ID à ton DIV.

Sinon, tu dois faire dequoi du genre:

var elementsDiv = document.getElementsByTag('div');

// Tu fais ta logique pour trouver le bon DIV à modifier...

// Je modifie le premier DIV trouvé
elementsDiv[0].style.display="none";

Grmmpfff

7 mai 2010 à 17:28:06

Bonsoir foxer,

Je crois pas pouvoir utiliser getElementById car je dois avoir 100 div sur ma page, l'ID ne peut correspondre qu'a un seul objet non ?

Et je vois pas nonplus ce que tu veux dire par "logique pour trouver le bon DIV" ? Il faut juste que lorsque je clique sur l'une des 100 divs, elle se mette en display:none.

Je suis pas bon du tout en javascript, j'ai du mal a te suivre :s

Golmote

7 mai 2010 à 18:12:52

Si tu créais tes divs et plaçais tes onclick dynamiquement, tu saurais tout de suite sur quel div on a cliqué...

var mon_div = document.createElement('div');

/* Modification du style...
mon_div.style.width...
mon_div.style.position... */

mon_div.onclick = function() {
  // Ici this représente le div cliqué...
  
  // Suppression du div :
  this.parentNode.removeChild(this);
}

J'en ai déjà trop dit... faut bien que tu cherches aussi...

Grmmpfff

9 mai 2010 à 22:29:33

Re,

Toujours pas réussis a faire quelque chose qui marche correctement :s

Voilà ce que j'ai essayé :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	
		<title> Javascript </title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="Content-Language" content="fr" />
		
		<style type="text/css">
		
		<!--
		
		body			{ margin: 0; padding: 0; background: #232323; }
		div			{ cursor: pointer; }
		
		-->
		
		</style>
		
		<script type="text/javascript">
		
		<!--
	
		var i;
		var maDiv;
			
		for(i=0;i<100;i++) {

		maDiv = document.createElement("div");
			
		maDiv.style.backgroundColor = 'white';
		maDiv.style.width = '30px';
		maDiv.style.height = '30px';
		maDiv.style.position = 'absolute';
		maDiv.style.top=(floor(Math.random()*600)+'px');
		maDiv.style.left=(floor(Math.random()*600)+'px');
		maDiv.innerHTML = 'div'.i;
			maDiv.onclick = function(){
				this.style.display="none";
			}
		}
			
		//-->
			
		</script>
		
	</head>
	<body>
	
	</body>
</html>

Sephiran

9 mai 2010 à 22:38:55

Il faut ajouter tes div à la page, la tu ne fais que les créer.

Citation : ton prof

(voir creatElement,appendChild, removeChild, getElementById().onclick)

Golmote

9 mai 2010 à 22:39:06

Lignes 36 et 37, c'est Math.floor() et non pas floor()

Ligne 38, l'opérateur de concaténation, c'est le + et non pas le .

Et un point-virgule après la ligne 41 pour être rigoureux (affectation d'une valeur à la propriété onclick, donc ";" à la fin).

Maintenant, pour que ça fonctionne, il faudrait que tu insères les divs dans la page... :-°

Pour ça, tu vas utiliser document.body.appendChild(maDiv);

Mais vu que ton code est dans le <head>, le body n'existe pas encore au moment de son exécution...
Donc je t'invite à mettre tout ton code dans l'instruction window.onload=function(){/*...*/}; pour attendre le chargement de la page.

Enfin, je pense que si ton prof vous fait bosser le DOM, c'est pas pour voir des innerHTML traîner.

Donc remplace-le par .appendChild(document.createTextNode('....'));

Jeny30

9 mai 2010 à 23:15:16

La solution est la (ne regarde pas).

window.onload = function()
{
	var maDiv;

	for(var i = 0; i < 100; i++)
	{
		maDiv = document.createElement("div");
		with(maDiv)
		{
			style.backgroundColor = 'white';
			style.width = '30px';
			style.height = '30px';
			style.position = 'absolute';
			style.top = (Math.floor(Math.random() * 600) + 'px');
			style.left = (Math.floor(Math.random() * 600) + 'px');
			appendChild(document.createTextNode('Div ' + i));
			onclick = function()
			{
				this.parentNode.removeChild(this);
			};
		}
		document.body.appendChild(maDiv);
	}
};

Golmote

10 mai 2010 à 1:56:26

Personnellement, j'aurais pas donné un code avec un with à un débutant... c'est dangereux... :euh:

Jeny30

10 mai 2010 à 7:19:44

Pas faux

window.onload = function()
{
	var maDiv;

	for(var i = 0; i < 100; i++)
	{
		maDiv = document.createElement("div");
		maDiv.style.backgroundColor = 'white';
		maDiv.style.width = '30px';
		maDiv.style.height = '30px';
		maDiv.style.position = 'absolute';
		maDiv.style.top = (Math.floor(Math.random() * 600) + 'px');
		maDiv.style.left = (Math.floor(Math.random() * 600) + 'px');
		maDiv.appendChild(document.createTextNode('Div ' + i));
		maDiv.onclick = function()
			{
				this.parentNode.removeChild(this);
			};
		}
		document.body.appendChild(maDiv);
	}
};

xavierm02

10 mai 2010 à 9:43:33

Par contre créer une variable style pour éviter de refaire tjrs maDiv.style, ça optimiserait et rendrait le code moins lourd.
Il faudrait aussi mettre document.body dans une var.
Et le fonction au onclick aussi.
Et on doit limite pouvoir assigner un objet directement à style mais après avec le truc des références elles doivent toutes se placer au même endroit... enfin j'ai jamais testé

Grmmpfff

10 mai 2010 à 11:00:22

Ah génial ça marche !

Merci beaucoup

DOM

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

DOM

Exercice

DOM

Supprimer

Modérer

Signaler le message aux modérateurs