Sujet Précédent Sujet Suivant

Comment créer 40 div en javascript

titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016 - 30 avril 2016 à 10:22
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 - 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

A voir également:

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
30 avril 2016 à 11:52

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 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
30 avril 2016 à 12:03

Et puis....

table.appendChild(divdropegal);

D'où vient cet élément "table" ?
Et divdropegal ... pareil...où l'as tu initialisé ????

titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016 > jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024
30 avril 2016 à 16:35

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

Bonjour Jordane
Je suis en train de travailler sur un nouveau code
j'espère trouver la solution
Cordialement

Réponse 2 / 2

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
2 mai 2016 à 09:17

bonjour

ce qui serait bien c'est que tu nous mette le html précis dans lequel tu veut mettre ces div.

Discussions similaires

création d'une Application Android

générer une grille de mots mêlés

Algorithme Mot Caché

Gestion de bulletin scolaire

mots meles

Votre réponse

Discussions similaires