Comment sélectionner un élément HTML en cliquant dessus

Question

Bonjour tout le monde et merci du temps que vous accorderez pour m'aider.

Je crée actuellement une petite application pour les cours (Projet de cours).
Et j'ai rencontré un problème.

J'ai une liste d'icônes et j'aimerai qu'en cliquant dessus l'id de l'icône soit stocké dans une variable je m'explique :

-------------------------------------
code permettant de lister les icones - icone.php

<div id="modal-contract" class="ionicons-content">
    <div class="d-flex row flex-wrap">
        <?php foreach ($ionicons as $ionicon) : ?>
            <span class="icon-services col">
                <ion-icon class="services-ion" id="ionicons!<?= $ionicon['id_ionicons'] ?>" name="<?= $ionicon['name_ionicons'] ?>"></ion-icon>
           </span>
        <?php endforeach; ?>
    </div>
</div>

l'id de chaque icones est différentes

-------------------------------------------------------
code permettant de changer l'id stocker - icone.js

// Déclaration de la variable permettant de sauvegarder l'icone selectionner au clique.
var ioniconsService = NULL;

// Function permetteant de changer l'icone selectionner au clique.
function selectIconService(){
    ioniconsService = 1;
}

Je ne sais pas si c'est possible de faire ça en js.

Merci !

jordane45 · Answer

Bonjour,

Il faut attacher l'évènement "click" sur tes icones..
Ensuite, facile de récupérer l'id ..

const icons = document.querySelectorAll(".services-ion");
    icons.forEach( function(element){
      element.addEventListener("click",function(event){
        var id = this.id;
        alert("j'ai cliqué sur :"+id);
      });
    });

Comment sélectionner un élément HTML en cliquant dessus

1 réponse

Discussions similaires

Newsletters