Evénement pour élément invisible

Bonjour,

J'ai une page qui contient initialement un élément invisible (display:none).
De ce fait, il n'est pas accessible avec

Code:

document.getElementById('mon_element')

qui a la valeur null.
Il est donc impossible d'ajouter un listener du genre
Code:

1 2 3 document.getElementById('mon_element').addEventListener('click', function () { //action à rélaiser });
lors du chargement de la page.

Y a-t-il un moyen de déclarer un listener pour un élément qui est invisible lors du chargement de la page ?

Salut

Il doit y avoir un problème ailleurs dans ton code car

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
<!DOCTYPE html>
<html lang="fr"> <!-- ABaseHTML.html -->
 
	<head>
		<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Minimum pour page HTML</title>
 
		<style>
 
                </style>
 
		<script>
                        'use strict'; // force la déclaration des variables
                        //********************************************************************************
                        //--------------------------------------------------------------------------------
 
                </script>
 
	</head> 
	<body>	<!-- ........................................................................................................... -->
		<div id="mon_element" style="visibility:hidden" > non visible</div>
		<button type="button" onclick="VoirOuNon()">caher ou non</button>
		<script> // ............................................................................................................. //
                        document.getElementById('mon_element').addEventListener('click', function () {
                                console.log("Bon ou pas bon?");
                        });
                        function VoirOuNon(){
                                let elem = document.getElementById('mon_element');
                                if (elem.style.visibility === "hidden"){
                                        elem.style.visibility = "visible"
                                }else{
                                        elem.style.visibility = "hidden"
                                }
}                       
                </script> <!-- ......................................................................................................... --> 
 
	</body>	<!-- ........................................................................................................... -->
 
</html>

ce code fonctionne pour les même condition de ta question.

Merci ProgElecT

Je viens de m'apercevoir que je me suis trompé pour l'id de l'élément.
Ce n'est pas document.getElementById('mon_element'), mais document.getElementById('id_de_mon_element_qui_est_correct').

Pfff !!