Je travaille sur un projet de gravure-A-Cetch. J'ai créé la grille qui contient une certaine quantité de carrés de la même taille (l'utilisateur est capable de saisir la quantité de carrés qui doit être affichée). Pour créer les carrés, j'ai utilisé CSS Grid et un JavaScript pour la boucle. Maintenant, je veux ajouter des auditeurs d'événements qui changent l'arrière-plan de chaque carré lors de la déplacement. Malheureusement, il montre toujours des erreurs lorsque j'essaie d'en ajouter. Le code actuel ne montre pas d'erreur, cela ne fait rien.
La méthode CreateSquares () devrait simplement créer et ajouter la quantité de carrés au DOM. Les types d'utilisateurs en quantité, par exemple 10, et les carrés affichés sont 10 en direction X et 10 dans la direction Y -> Donne 100 carrés au total. Après cela, je souhaite ajouter un auditeur d'événement, qui modifie la couleur d'arrière-plan du carré que l'utilisateur planant sur (la couleur d'arrière-plan devrait rester modifiée). Je suis reconnaissant de toute aide, car je suis vraiment désemparé: d p>
p>
<div class="squareDiv"></div> <div id="squares"></div>
3 Réponses :
CreateSQures Attribuer la classe au lieu de ID. Depuis, vous ne devriez avoir que l'élément avec un identifiant.
- Déplacez le
AddeventListener à l'intérieur de la fonction après avoir créé l'élément.
Vous avez probablement besoin de quelque chose comme celui-ci
J'ai corrigé le script, fixez-le maintenant le CSS P>
p>
<label><input type="checkbox" id="random" />Random</label> <div id="container"></div>
Oh Wow, il m'a fallu un peu pour comprendre ce que tu as fait là-bas, mais ça part bien merci. J'essaie maintenant de créer un bouton appelé RandomColorbutton, lorsque je clique sur ce bouton, la couleur d'arrière-plan des carrés doit être aléatoire. Comment puis-je poster un autre extrait de code ici? Je suis totalement nouveau pour empiler débordement: D
@Aronfischer S'il vous plaît visitez meta.stackexchange. com / questions / 5234 / ...
En fait, je t'ai fait une grille maintenant
Lors de la création d'éléments HTML similaires avec les mêmes propriétés, il est préférable de les regrouper avec p> class code> et non id code>. C'est bon car il devient simple de boucler ces éléments HTML avec foreach code> ou d'autres méthodes de boucle que vous préférez préférez.
<div class="squareDiv"></div>
<div id="squares"></div>
Je t'ai fait un extrait. Veuillez corriger les erreurs et corriger le HTML - Veuillez noter que vous ne pouvez avoir qu'un ID = "carrés" - IDS doit être unique.
Même si c'est (je l'ai ajouté) rien ne se passe
ok to je change les id = "carrés" en classe = "carrés"?
squares.setatattribute ("id", "carrés"); mais élémentdiv # carrés existe déjàVotre référence à #squares n'est pas valide pour une utilisation JavaScript normale, ses "carrés", si vous utilisiez jQuery le # pour les identifiants et. pour les cours est ok.