Bonjour à tous,

J'ai rencontré un problème avec le bouton de fermeture d'une fenêtre popup sur mon site web. J'ai un bouton dans ma fenêtre popup, et lorsque je clique dessus, rien ne se passe.

Voici le code HTML et JavaScript associé :

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('closeButton').addEventListener('click', function() {
        console.log('Bouton de fermeture cliqué');
        document.getElementById('siteInfo').style.display = 'none';
    });
});

           <div id="siteInfo" class="popup-container">
                        <div id="closeP">X</div>
                            <div id="bloc-titre-ville">
                                <span id="titre-ville"></span>
                            </div>

                            <div id="alerte-rotate">
                                <img id='icon-alerte-rotate' height="32px" width="32px" src="img/exclamation.png">
                                <span id='texte-alerte-rotate'>0 alerte(s) sur le site.</span>
                            </div>

                            <div class="button-container">
                                <button class="btn" id="gauche">Changer de vue</button>
                                <button class="btn" id="droite">Pilotage site</button>
                            </div>

Au début, je pensais que cela venait du fait que mon bouton se trouvait dans ma div, j'ai donc testé de le mettre ailleurs, mais rien ne change. De plus, j'ai aussi vidé le cache, mais rien ne change.

Je vous remercie de votre aide !

Bonjour,

dans ton JS tu cibles un élément d'id "closeButton", mais tu n'as pas ça dans ton HTML. Je suppose que tu cherches à cliquer sur l'élément d'id "closeP".

Note supplémentaire : une div n'est pas un button. Utilise un élément button (avec type="button") pour ton bouton de fermeture. Ainsi il sera actionnable au clavier, par exemple.

Note supplémentaire 2 : une image ne sort jamais sans son attribut alt. Si l'image a du sens, c'est-à-dire que son absence nuit à la compréhension, mets un texte descriptif, pas trop long, dans l'attribut alt. Si elle est décorative, mets un alt vide.

-
Edité par Lamecarlate 30 avril 2024 à 7:29:36