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

**alex5956** · 03/11/2018, 23h00

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 HTML :

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

<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 :

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

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 ?

**danielhagnoul** · 04/11/2018, 00h00

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 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
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>

**psychadelic** · 04/11/2018, 00h04

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 html :

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

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 JavaScript :

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

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 JavaScript :

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

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 JavaScript :

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

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 JavaScript :

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

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 JavaScript :

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

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

Invité · 04/11/2018, 09h45

Bonjour,

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

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

Code html :

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

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

Code JavaScript :

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

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 html :

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

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 JavaScript :

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

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.

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager