Comment créer 40 div en javascript

Messages postés
78
Date d'inscription
vendredi 26 février 2010
Dernière intervention
8 juin 2016
- - Dernière réponse : @karamel
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
- 2 mai 2016 à 09:17
Bonjour,
Je cherche depuis plusieurs jours à créer une div contenant 40 div à l'aide d'une boucle javascript
Ceci est la div d'origine

<div id='divdropegal' class='div-drop' style='background-color:yellow;' ondragover='return false' ondrop='OnDropTarget(this, event);'>
<img id="divdrage1" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage2" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage3" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage4" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage5" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage6" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage7" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage8" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage9" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage10" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage11" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage12" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage13" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage14" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage15" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage16" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage17" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage18" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage19" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage20" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage21" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage22" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage23" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage24" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage25" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage26" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage27" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage28" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage29" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage30" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage31" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage32" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage33" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage34" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage35" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage36" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage37" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage38" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage39" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
<img id="divdrage40" class='divabsolute' src="sega.png" draggable='true' ondragstart='OnDragStart(this, event);'>
</div>


Voici le script pour créer le code ci-dessus

var div;
for (var k = 1; k < 41; k++) {
div = document.createElement("div");
div.setAttribute("id", "divdrage" + k);
div.setAttribute("class", "divabsolute");
table.appendChild(divdropegal);
}
<div id='divdropegal' class='div-drop' style='background-color:yellow;' ondragover='return false' ondrop='OnDropTarget(this, event);'>
</div>


Mais j'avoue que cette méthode ne fonctionne pas
pouvez vous m'aider a orienter mes recherches
Cordialement

Pierre Nonclercq
Afficher la suite 

Votre réponse

2 réponses

Messages postés
23610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 décembre 2018
0
Merci
Bonjour
peux tu montrer où tu as mis ton code javascript ?
J'ai l'impression que tu as oublié les balises script. ..
jordane45
Messages postés
23610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 décembre 2018
-
Et puis....
table.appendChild(divdropegal);

D'où vient cet élément "table" ?
Et divdropegal ... pareil...où l'as tu initialisé ????
titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Dernière intervention
8 juin 2016
> jordane45
Messages postés
23610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 décembre 2018
-
Bonjour
L'élément table je l'ai inséré à la place des img
divdropegal est le contenant des 40 divdrope(1 à 40 ) construit dans la boucle
J'avoue avoir essayé beaucoup de solutions mais pour le moment je n'ai pas trouvé comment faire cette boucle plutôt que d'écrire 40 div
un début de solution me permettrez de réfléchir à la construction de cette boucle le mieux c'est un exemple
Cordialement
titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Dernière intervention
8 juin 2016
> jordane45
Messages postés
23610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 décembre 2018
-
Bonjour Jordane
Je suis en train de travailler sur un nouveau code
j'espère trouver la solution
Cordialement
Commenter la réponse de jordane45
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
0
Merci
bonjour

ce qui serait bien c'est que tu nous mette le html précis dans lequel tu veut mettre ces div.
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.