Affichage lien événements click

Guizmo
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.
Quand je clique sur le lien modifier cela affiche ma page modifications_gateaux.php or j'ai fait un événement click avec javascript de sorte à ce que les éléments de la page (modifications_gateaux.php) puisse s'afficher directement sur ma page gateaux.php lorsque je clique sur modifier au lieu de m'envoyer sur le lien. Seulement celui-ci n'a pas l'air de fonctionner. Merci pour votre aide

Page gateaux.php :

                        <div id= "modifications"><a href= "modifications_gateaux.php?commentaireUtilisateur=<?=$c['id']?>">Modifier</a></div>
                        <script src="js/modifications_gateaux.js"></script>

Page modifications_gateau.php:
<body>

  <div id="modificationsGateaux">
    <h2 class="h-2">Modifier le commentaire</h2>

    <?php if(!empty($_SESSION['id'])){
        ?>
        <form action ="modifier_gateaux.php?id=<?= $_GET['commentaireUtilisateur']; ?>#scroll" method= "POST">
            <div id="pseudo"><?php echo '<b>Pseudo : </b>' . $_SESSION['pseudo'] ?></div>
            <textarea name="commentaire" id="commentaire" placeholder=" Taper votre commentaire..." cols="50" rows="5"><?= $utilisateur['commentaire']; ?></textarea><br />
            <input type="submit" id="poster" value="Poster" name="submit_commentaire" />
        </form>
        <?php
        } ?>
  </div>   

  <script src="js/modifications_gateaux.js"></script>  
</body>

</html>

Page JavaScript :

/Apparition modifications/
var modificationsGateaux1 = document.getElementById('modifications')
modificationsGateaux1.addEventListener('click', function () {
document.getElementById('modificationsGateaux')
modificationsGateaux.style.visibility = 'visible';
})

6 réponses

Guizmo
Auteur
Réponse acceptée

Comme ceci ?

var modificationsGateaux1 = document.getElementById('lien')
modificationsGateaux1.addEventListener('event', event.preventDefault() {
document.getElementById('modificationsGateaux')
modificationsGateaux.style.visibility = 'visible'; return false
})

Soundboy39

Bonjour,

Il faut bloquer le comportement par défaut du lien qui est de rediriger l'utilisateur vers une autre page.

Ajoute "return false;" après "modificationsGateaux.style.visibility = 'visible';"

Guizmo
Auteur

Bonjour Soundboy39,

Comme ceci ? Enfaîte cela me renvoie toujours sur la page

var modificationsGateaux1 = document.getElementById('modifications')
modificationsGateaux1.addEventListener('click', function () {
  document.getElementById('modificationsGateaux')
  modificationsGateaux.style.visibility = 'visible'; return false;
})
Soundboy39

Ah... Il y aussi le fait que le listener n'est pas associé au lien mais à la div parente. Il faudrait attribuer un id au lien et associer le listener non pas à la div mais au lien.

Guizmo
Auteur

Salut, j'ai rajouté une id lien seulement cela n'a pas l'air de fonctionner et j'ai beau bidouiller mon code cela me renvoie toujours sur l'autre page :/

<div id= "modifications"><a id="lien" href= "modifications_gateaux.php?commentaireUtilisateur=<?=$c['id']?>">Modifier</a></div>

var modificationsGateaux1 = document.getElementById('lien')
modificationsGateaux1.addEventListener('click', function () {
  document.getElementById('modificationsGateaux')
  modificationsGateaux.style.visibility = 'visible'; return false
})
Soundboy39

Mais "event" en paramètre de ta fonction et appel event.preventDefault() au début de ta fonction, s'il te faut plus de détails, demande à ton moteur de recherche préféré.