impossible d'afficher l'id de l'objet appelant

Version imprimable

03/11/2018, 23h00
alex5956

impossible d'afficher l'id de l'objet appelant
bonjour à tous , d'une
je rencontre un problème en javascript quand j'essaye d'afficher l'id d'une img ça ne marche pas , même en essayant de d'afficher le string de l'objet, au final j'obtiens undefined le problème c'est que ma fonction coucou ne reconnaît pas son objet appelant.

Je vous laisse le code:

Code:

<img id="choosemale" onclick="coucou()" title="male" height="30" width="30%" src="PictosInterrest/male.png">

ça c'est mon code html et mon code js:
Code:

1 2 3 4 5 <script> function coucou(){ console.log(this.id); } </script>
pourriez vous m'aider pour manipuler l'objet appelant dans la fonction et donc afficher l'id, please ?

:salut:

Il serait temps de passer aux codes (CSS, HTML, JS) d'aujourd'hui !

Gestionnaire d'événement "load", voir : https://developer.mozilla.org/fr/docs/Web/Events/load.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="fr" dir="ltr">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="author" content="Daniel Hagnoul">
    <title>Exemple</title>
    <style>
        *,
        *:after,
        *:before {
            box-sizing: border-box;
        }
 
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 1rem;
            display: grid;
            grid-template-columns: minmax(20rem, 60rem) 20rem;
            grid-template-rows: repeat(min-content, 4);
            grid-column-gap: 0.6rem;
            grid-row-gap: 0.6rem;
        }
 
        header {
            grid-column: 1 / span 2;
            grid-row: 1;
            text-align: center;
        }
 
        main {
            grid-column: 1;
            grid-row: 2;
        }
 
        aside {
            grid-column: 2;
            grid-row: 2;
        }
 
        aside>h3 {
            text-align: center;
        }
 
        footer {
            grid-column: 1 / span 2;
            grid-row: 3;
            text-align: center;
        }
 
        footer>* {
            margin-left: 2rem;
        }
    </style>
    <script defer>
        let elemChoose = null;
 
        document.addEventListener('DOMContentLoaded', ev => {
            // le DOM est construit, la page web n'est pas visible
            // début code du test
 
            elemChoose = document.querySelector('#choosemale');
 
            elemChoose.style.border = "10pt dotted grey"; // pour montrer que c'est posssible
 
            // fin code du test
        }, {
            capture: false,
            passive: true,
            once: false
        });
 
        window.addEventListener('load', ev => {
            // le DOM est construit et la page web est visible
            // début code du test
 
            elemChoose.addEventListener('click', ev => {
                console.log(ev.target.id);
            }, {
                capture: false,
                passive: true,
                once: false
            });
 
            // fin code du test
 
        }, {
            capture: false,
            passive: true,
            once: false
        });
    </script>
</head>
 
<body>
    <header>
        <h1>Exemple</h1>
    </header>
    <aside>
        <h3>Commentaires</h3>
        <p>Salut !</p>
        <br>
        <p>J'utilise uniquement le JS d'aujourd'hui, ES2015+.</p>
    </aside>
    <main>
        <!-- code du test -->
 
        <img id="choosemale" src="https://danielhagnoul.developpez.com/images/imageTest.png">
 
        <!-- fin code du test -->
    </main>
    <footer class="h-entry">
        <time class="dt-published" datetime="2018-11-03">2018-11-03</time>
        <a rel="license" href="http://creativecommons.org/licenses/by/2.0/be/">
            <img alt="Licence Creative Commons" src="https://i.creativecommons.org/l/by/2.0/be/80x15.png">
        </a>
        <a rel="license" href="http://creativecommons.org/licenses/by/2.0/be/">Licence Creative Commons Attribution 2.0
            Belgique</a>.
    </footer>
</body>
 
</html>

Je crois pas qu'en plaçant le onclick dans la balise img on puisse récuperer le moindre idet de toutes façon, pour moi (et beaucoup d'autres), mixer des instruction JavaScript dans du code HTML, c'est le meilleur moyen d'avoir du code ingérable.
donc coté html
Code:

1 2 <img id="img_1" src="imageTruc.jpg"> <img id="img_2" src="imageBidule.jpg">
et coté JavaScript deux fonctions identiques mais qui ne fonctionneront pas pareil suivant la méthode utilisée pour leur lier l'évènement du click :
Code:

1 2 3 4 5 6 7 8 function coucou_methode_1(e) { // le e est la variable objet liée à l'evenement console.log(this.id); console.log(e.target.id); } function coucou_methode_2(e) { console.log(this.id); // renverra toujours undefined console.log(e.target.id); }
Les méthodes
la plus simple :
Code:

1 2 3 4 5 6 7 8 document.getElementById('img_1').onclick = coucou_methode_1; // ce qui est équivalent à : document.getElementById('img_2').onclick = function(e) { console.log(this.id); console.log(e.target.id); }
La plus classique
Code:

1 2 3 4 5 document.getElementById('img_1').addEventListener('click', coucou_methode_1, false); // ce qui peut aussi s'écrire en fonction fléchée (es6) et pour laquelle la gestion du this est réservée à l'objet pouvant l'englober document.getElementById('img_2').addEventListener('click', ev => coucou_methode_2(ev));
mais si tu veux éviter de d'éclarer autant de fonctions qu'il y a d'images sur ta page :

Code:

document.querySelectorAll("img").forEach( elm=>elm.addEventListener('click', coucou_methode_1, false) );

qui trouve aussi sa déclinaison en notation fléchée, utile si on passe par un objet ( en fait ça fait la même chose qu'un bind )

Code:

document.querySelectorAll("img").forEach( elm=>elm.addEventListener('click', ev => coucou_methode_2(ev)));

Bonjour,

1- si on se contente de reprendre ton code... :aie:

Il faut au moins transmettre quelque chose à la fonction, pour qu'elle "sache" ce qu'est "this" :

Code:

<img id="choosemale" onclick="coucou( this );" title="male" height="30" width="30%" src="PictosInterrest/male.png">
Code:

1 2 3 4 function coucou( elt ) { console.log( 'id:'+elt.id, 'title:'+elt.title ); }
2- Si tu as plusieurs images auxquelles tu veux appliquer la fonction, le mieux est de :

leur appliquer une classe CSS ("clickimg" par exemple)
gérer l'évènement en JavaScript
Code:

1 2 3 <img class="clickimg" id="choosemale" title="male" height="30" width="30%" src="PictosInterrest/male.png"> <img class="clickimg" id="choosefemale" title="female" height="30" width="30%" src="PictosInterrest/female.png">
Code:

1 2 3 4 5 6 7 8 9 10 11 function coucou( elt ) { console.log( 'id:'+elt.id, 'title:'+elt.title ); } // pour toutes les images avec la classe "clickimg" : var les_images = document.querySelectorAll('.clickimg'); les_images.forEach( function(l_image){ // pour chacune l_image.addEventListener('click', function() { coucou( l_image ); }); });
N.B. C'est une variante (moins "condensée") de ce qu'a proposé psychadelic.