Discussion :

[hamster18]

Bonjour, j'ai un code html similaire à celui qui suit :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="div">
 <h2>News 1</h2>
 <p class="text">bloblob1</p>
 <p><a class="btn" href="#" role="button">View</a></p>
</div>
<div class="div">
 <h2>News 2</h2>
 <p class="text">bloblob2</p>
 <p><a class="btn" href="#" role="button">View</a></p>
</div>
<div class="div">
 <h2>News 3</h2>
 <p class="text">bloblob3</p>
 <p><a class="btn" href="#" role="button">View</a></p>
</div>

Pour effectuer un certain évènement au clic je fait ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<script>
       document.querySelectorAll(".btn").forEach( input => input.addEventListener('click', view) );
</script>

et dans un fichier .js j'ai le code de "view".
J'aimerais savoir comment connaitre dans mon code .js le bouton "cliqué" par l'utilisateur. (en js et pas jQuery si possible)

Merci d'avance de vos réponses.
Cordialement.

[NoSmoking]

Bonjour,
c'est ta fonction view qu'il aurait fallu montrer et qui devrait commencer par récupérer en paramètre l'objet event associé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function view(e){
  const objetClique = e.target;
  console.log(objetClique);
  // tu en fais ce que tu veux
}

Ceci étant utiliser des éléments <a> pour ce genre d'action ne m'apparaît pas comme judicieux, ce ne sont pas des liens.

[SpaceFrog]

passe l'id du bouton en paramètre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 document.querySelectorAll(".btn").forEach( input => input.addEventListener('click', function(){view(this.id)};) );

[Doksuri]

j'ai pas tres bien compris "ou" tu voulais savoir quel element etait clique...
connaitre l'element "avant" view

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
document.querySelectorAll(".btn").forEach( input => input.addEventListener('click', e => {
                console.log(e.target);
                view(e.target);
            })
        );
 
        function view(element) {
            console.log(element);
        }

connaitre l'element "dans" view

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
document.querySelectorAll(".btn").forEach( input => input.addEventListener('click', view) );
 
        function view() {
            console.log(this);
        }

[hamster18]

Ce que je chercher était de savoir qu'elle élément était cliquer, merci beaucoup pour vos réponse !

[javatwister]

Salut

C'est quoi l'idée? Tu as prototypé un attribut "role" pour les éléments a?

En tout cas, pour l'instant je ne vois pas ce qui permet de différencier tes liens entre eux: pas d'id, texte identique...

[hamster18]

J'avais 3 boutons identiques mais je voulais que quand un de ces boutons soit cliqués, il effectue une action ( récupérer le texte de sa balise p).