Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Evénement pour élément invisible


Sujet :

JavaScript

  1. #1
    Membre actif
    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 :Sélectionner tout -Visualiser dans une fenêtre à part
    document.getElementById('mon_element')
    qui a la valeur null.
    Il est donc impossible d'ajouter un listener du genre
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    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 ?

  2. #2
    Rédacteur/Modérateur

    Salut

    Il doit y avoir un problème ailleurs dans ton code car
    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
    <!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.
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.

  3. #3
    Membre actif
    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 !!

###raw>template_hook.ano_emploi###