title: My JavaScript "click" function only works once
body: <p>I'm trying to give some style to my cursor with Javascript, with a mark that follows the cursor everywhere on screen. Now I'm trying to apply a specific style when I click on the page. The problem is that my function works but only once. Then I have to refresh the page so it can work again. I've used an addEventListener method with 'click', that I think is the proper method.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var cursor1 = document.querySelector(".cursor1");
  var cursor2 = document.querySelector(".cursor2");
  /*
  
  this was some test.
  
  function testscale(){
      cursor1.animate(
          [{transform: 'scale(1)'},{transform: 'scale(0)'}],
          {duration:200}
          );
  */
  
  
  document.addEventListener('click', function(){
      cursor1.classList.add("cursoranimation");
  });
  --//
  
  
  document.addEventListener('mousemove', function(e){
      cursor1.style.cssText = cursor2.style.cssText = "left: " + e.clientX + "px; top: " + e.clientY + "px;";
  });
  //-les styles sont dans ../Pages/Scss/Base/_undefined</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.cursoranimation{
      transform: scale(1);
      transform: translate(-50%,-50%);
      animation: cursoranimation2 1000ms backwards;
  }
  
  .cursor1{
      position:fixed;
      width: 70px;
      height: 70px;
      border:1px solid black;
      border-radius:50%;
      left:0;
      top:0;
      pointer-events:none;
      transform: translate(-50%, -50%);
      z-index: 1;
  }
  
  .cursor2{
      position:fixed;
      width: 8px;
      height: 8px;
      background-color:#c6c6c6;
      border-radius:50%;
      left:0;
      top:0;
      pointer-events:none;
      transform: translate(-50%, -50%);
      z-index: 1;
  }
  
  @keyframes cursoranimation2 {
      0% {
          background-color: white;
          transform: scale(1);
          transform:translate(-15%,-15%);
      }
      50% {
          background-color: rgb(179, 247, 202);
          transform:scale(0.6);
          transform:translate(-25%,-25%);
      }
      75% {
          background-color: rgb(179, 247, 202);
          transform:scale(0.4);
          transform:translate(-35%,-35%);
      }
      100% {
          background-color: rgb(132, 247, 176);
          transform:scale(0.3);
          transform:translate(-50%,-50%);
      }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Do you have some advice for my situation ? Thank you ! (i'm not using jquery)</p>