IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Ajout d'images avec itération


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut Ajout d'images avec itération
    Bonjour à tous,

    j'ai créé un jeu avec l'aide du forum pour mes élèves :
    https://codepen.io/cyril-gomez/pen/eYjERxE?editors=0100

    et après avoir joué avec mes élèves de CP, je me rends compte qu'il faut que je l'améliore encore un peu.

    Dans le jeu, les élèves cliquent sur 10 images, vérifient leur dizaine et recommence pour compter le nombre d'images affichées.
    Je souhaiterais que lorsqu'une dizaine vérifiée est correcte, elle s'affiche pour une meilleure lisibilité du nombre de dizaines réalisées.

    Pour cela, j'ai créé un bandeau d'affichage des images sur le côté et j'ai aussi créé les images qui doivent s'afficher.
    Nom : coeur1.jpg
Affichages : 86
Taille : 30,2 Ko
    la couleur du bord change pour chaque dizaine réalisée et correspond aux cercles des images.

    Du coup je me suis dit que je mettais dans le html ça
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="bandeau-domino">
      <div>
        <output id="titre-domino">Dizaine réalisée</output>
      </div>
      <div class="affichage-domino">
        <img id="affichage_coeur1" src="imgs/coeur/coeur1.jpg" name="image" width="150" height="120" />
        <img id="affichage_coeur2" src="imgs/coeur/coeur2.jpg" name="image" width="150" height="120" />
      </div>  
    </div>

    dans le css, j'ai mis display: none; pour chaque idenfin dans le script, dans la fonction verifier(), j'ai mis
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
     document.getElementById("affichage_coeur1").style.display = "inline-block";
    pour afficher l'image.

    Mais là où je bloque, c'est sur l'affichage de la deuxième image, je pourrais faire
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    if nbrDizaines==1 {document.getElementById("affichage_coeur1").style.display = "inline-block";}
    if nbrDizaines==2 {document.getElementById("affichage_coeur1").style.display = "inline-block";
    ...

    je pense que ça fonctionnera mais c'est pas très synthétique.

    Surtout que j'aimerais bien évidemment que s'affiche d'autres dominos, si les images à cliquer sont des chiens, des ours, des poissons...

    Je me suis dit aussi que peut être je pouvais faire quelque chose comme ça:
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    Pics= [ ["coeur","https://www.espritterroirs.fr/wpsacco/wp-content/uploads/coeur-150x150.png"], 
            ["pomme","https://www.educol.net/image-fruit-pomme-verte-dl27813.jpg"], 
            ["ours","https://www.waouo.com/wp-content/uploads/2014/03/oursonavecunballon-576x576.jpg"],
            ["chien","https://iheartcraftythings.com/wp-content/uploads/2021/04/Dog-DRAWING-%E2%80%93-STEP-10.jpg"],
            ["soleil","https://verbnow.com/wp-content/uploads/2022/03/Sun-Fin-735x490.jpg"],
            ["poisson","https://iheartcraftythings.com/wp-content/uploads/2021/04/Fish-DRAWING-%E2%80%93-STEP-10.jpg"]
           ];
    avec toutes les images et un affichage au fur et à mesure.
    Mais ça je sais pas faire du tout.

    https://codepen.io/cyril-gomez/pen/LYBzroR

    Merci par avance.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    regarde du coté de createElement pour ajouter une image dans le DOM
    puis AppendChild pour l'ajouter dans un conteneur
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    Merci, j'ai réussi à faire l'affichage des images, mais il me reste un soucis.

    Quand je veux supprimer l'exercice, les images ne s'enlèvent pas.

    Je sais pas si je dois utiliser removeChild car je ne dois pas supprimer une seule image, mais peut-être plusieurs.

    Voici où j'en suis :
    https://codepen.io/cyril-gomez/pen/LYBzroR?editors=0010

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    oui une boucle sur les enfants pour faire removeChild
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    J'ai essayé plusieurs réponses et finalement, celle-ci semble être la bonne.
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    for (let i = affichage_domino.childNodes.length - 1; i >= 0; i--) {
      affichage_domino.removeChild(affichage_domino.childNodes[i]);
    }

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    Ou un truc du genre
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    while( affichage_domino.childNodes.length > 0) {
      affichage_domino.removeChild(affichage_domino.childNodes[0]);
    }
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    Merci en tout cas pour les conseils avisés.

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Bonjour,
    Citation Envoyé par SpaceFrog
    Ou un truc du genre
    ...
    ou plus concis, sans passer par textContent ou innerHTML :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    while (element.firstChild) {
      element.firstChild.remove();
    }

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Python 3.X] Ajout une image avec xml.etree
    Par thais781 dans le forum Général Python
    Réponses: 3
    Dernier message: 19/12/2022, 11h11
  2. Ajouter des images avec file quand on a plusieurs sous dossiers
    Par Lunesti dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 09/02/2021, 16h27
  3. Ajout d'image avec SL sharpPDF
    Par morgan2b dans le forum Silverlight
    Réponses: 0
    Dernier message: 02/04/2011, 21h53
  4. Réponses: 1
    Dernier message: 19/02/2010, 21h40
  5. [DOM] Ajouter une image avec Dom
    Par Pacen dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 26/06/2008, 22h52

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo