Problème fonction css js sur un bouton

Signaler
-
 Louis -
Bonjour,
je viens vers vous car je suis encore débutant sur html, css, et js et je rencontre un problème dans mon code. Le but de cette page est de faire une animation "ripples" quand je clique sur le bouton, j'ai recopié le code à partie d'une vidéo youtube (car il ne mettaient pas le code en description) et je pense que c'est de là que vient le problème...
Pouvez vous m'aider à trouver mon erreur? J'ai fait des recherches google et relu de nombreuses fois mon code mais je ne trouve toujours pas...

je vous met ici l'html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ripple effect</title>
    <link rel="stylesheet" href="style.css">
    <script src="ripples.js"></script>
</head>
<body>
<a href="#">Button</a>
<a href="#">Button</a>
</body>
</html>


le css:

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,90&display=swap');
*
{
 margin: 0;
 padding: 0;
 font-family: 'Poppins', sans-serif;
}
body
{
 display: flex;
 justify-content: center;
 min-height: 100vh;
 flex-direction: column;
 background: #040d15;
}
a
{
 position: relative;
 display: inline-block;
 padding: 12px 36px;
 margin: 10px 0px;
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
 font-size: 18px;
 letter-spacing: 2px;
 border-radius: 40px;
 overflow: hidden;
 background: linear-gradient(90deg,#0162c8,#55e7fc);
}
a:nth-child(2)
{
 background: linear-gradient(90deg,#755bea,#ff72c0);
}
span
{
 position: absolute;
 background: #fff;
 transform: translate(-50%,-50%);
 pointer-events: none;
 border-radius: 50%;
 animation: animate 1s linear infinite;
}
@keyframes animate
{
 0%
  {
   width: 0px;
   height: 0px;
   opacity: 0.5;
  }
  100%
  {
   width: 500px;
   height: 500px;
   opacity: 0;
 }
}


et le js:

const buttons = document.querySelectorAll('a');
 buttons.forEach(btn => {
  btn.addEventListener('click',function(e){

   let x = e.clientX - e.target.offsetLeft;
   let y = e.clientY - e.target.offsetTop;

   let ripples = document.createElement('span')
   ripples.style.left = x + 'px';
   ripples.style.top = y + 'px';
   this.appendChild(ripples);

   setTimeout(() => {
    ripples.remove()
  },1000);
 })
})


Pour la vidéo youtube c'est par ici: https://www.youtube.com/watch?v=ueyRcYEmsrI

Merci d'avances pour vos réponses ;)
Louis

2 réponses

Messages postés
29173
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 août 2020
2 678
Bonjour,

Je pense que tu as placé ton JS avant que les boutons n'existent dans ta page.
Il est conseillé de mettre ses fichiers js juste avant le </body>

Tu peux aussi simplement avoir du cache dans ton navigateur... donc vide le avant de réessayer.

Tu peux également essayer avec un autre navigateur (moi j'ai testé avec Firefox).

Et au cas où, tu peux tester en mettant le css et le js dans le même fichier
<!DOCTYPE html>
<html>
<head>
  <title>TEST</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
  @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,90&display=swap');
*
{
 margin: 0;
 padding: 0;
 font-family: 'Poppins', sans-serif;
}
body
{
 display: flex;
 justify-content: center;
 min-height: 100vh;
 flex-direction: column;
 background: #040d15;
}
a
{
 position: relative;
 display: inline-block;
 padding: 12px 36px;
 margin: 10px 0px;
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
 font-size: 18px;
 letter-spacing: 2px;
 border-radius: 40px;
 overflow: hidden;
 background: linear-gradient(90deg,#0162c8,#55e7fc);
}
a:nth-child(2)
{
 background: linear-gradient(90deg,#755bea,#ff72c0);
}
span
{
 position: absolute;
 background: #fff;
 transform: translate(-50%,-50%);
 pointer-events: none;
 border-radius: 50%;
 animation: animate 1s linear infinite;
}
@keyframes animate
{
 0%
  {
   width: 0px;
   height: 0px;
   opacity: 0.5;
  }
  100%
  {
   width: 500px;
   height: 500px;
   opacity: 0;
 }
}
</style>
</head>
<body>
  <a href="#">Button</a>
  <a href="#">Button</a>

  <script type="text/javascript">
   
   const buttons = document.querySelectorAll('a');
   buttons.forEach(btn => {
    btn.addEventListener('click',function(e){

     let x = e.clientX - e.target.offsetLeft;
     let y = e.clientY - e.target.offsetTop;

     let ripples = document.createElement('span')
     ripples.style.left = x + 'px';
     ripples.style.top = y + 'px';
     this.appendChild(ripples);

     setTimeout(() => {
      ripples.remove()
    },1000);
   })
  })
  </script>
</body>
</html>

Effectivement, ça fonctionne mieux maintenant
Je pensais qu'on pouvait faire comme pour le css avec js c'est à dire l'appeler au début, mais ton code fonctionne bien
Merci beaucoup
Messages postés
29173
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 août 2020
2 678
Tu peux placer tes appels JS dans le head... mais ils s'exécutent avant que le <body> soit chargé.
( un navigateur web lit le contenu à afficher de haut en bas... )

Donc, si tu veux quand même placer ton appel JS avant le body... il faut lui dire d'attendre que la page soit totalement chargée.
Pour ça tu peux utiliser
document.addEventListener("DOMContentLoaded", function(event) {
    // Your code to run since DOM is loaded and ready
});


par exemple
document.addEventListener("DOMContentLoaded", function(event) {
  const buttons = document.querySelectorAll('a');
   buttons.forEach(btn => {
    btn.addEventListener('click',function(e){

     let x = e.clientX - e.target.offsetLeft;
     let y = e.clientY - e.target.offsetTop;

     let ripples = document.createElement('span')
     ripples.style.left = x + 'px';
     ripples.style.top = y + 'px';
     this.appendChild(ripples);

    setTimeout(() => {
      ripples.remove()
    },1000);
   })
  });
});
>
Messages postés
29173
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 août 2020

D'accord je vais faire ça
Merciii beaucoup