title: Can´t loop through click event- function error appears to loop through that click event?! The loop somehow doesn´t work
body: <p>the div elements should be self explaining they all have the same class- querySelectorAll. Is there a need to put the function moveElements into another loop too and if - how to do that? The console error notification is:  Cannot set properties of undefined (setting 'width') but it works when having only one event listener. ^^</p>
  <pre><code>const arrowEase = document.querySelectorAll('.arrow-start');
  
  for (var i = 0 ; i &lt; arrowEase.length; i++) {
      arrowEase[i].addEventListener('click', moveElements); 
  }
  
  function moveElements(){
      function moveit(timestamp, el, dist, duration) {
  
          var timestamp = timestamp || new Date().getTime()
          var runtime = timestamp - starttime
          var progress = runtime / duration
          var dist = 600
          progress = Math.min(progress, 1)
          el.style.width = (dist * progress).toFixed(2) + 'px'
          if (runtime &lt; duration) {
              requestAnimationFrame(function (timestamp) {
                  moveit(timestamp, el, dist, duration)
              })
          }
      }
  
      requestAnimationFrame(function (timestamp) {
          starttime = timestamp || new Date().getTime()
          moveit(timestamp, arrowEase, 400, 1000)
      })
  };
  </code></pre>
  <p>asked for the html:</p>
  <pre><code>    &lt;div id=&quot;impress&quot;&gt;
        &lt;div class=&quot;no-support-message&quot;&gt;
          Your browser doesn't support impress.js. Try Chrome or Safari.
        &lt;/div&gt;
        
        &lt;div class=&quot;step&quot; data-x=&quot;0&quot; data-y=&quot;0&quot;&gt;
          &lt;div class=&quot;header-style header-backlayer&quot;&gt;&lt;h1&gt;Assistance-Leistungen bei Arbeitslosigkeit&lt;/h1&gt;&lt;/div&gt;
          &lt;div class=&quot;container-step-1&quot;&gt;
            &lt;div class=&quot;arrow-start&quot;&gt;
            
              &lt;div class=&quot;arrow-1&quot;&gt;
                &lt;div class=&quot;diamond&quot;&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            
              &lt;div class=&quot;arrow-2&quot;&gt;
                &lt;div class=&quot;diamond&quot;&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            
              &lt;div class=&quot;arrow-3&quot;&gt;
                &lt;div class=&quot;diamond&quot;&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              
            &lt;/div&gt;
  
            &lt;div class=&quot;modal&quot;&gt;
              &lt;div class=&quot;modal-content header-style&quot;&gt;
                &lt;span class=&quot;close-button&quot;&gt;&amp;times;&lt;/span&gt;
                &lt;h1&gt;Bitte navigieren Sie mit den Pfeiltasten über die Seiten!&lt;/h1&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>this worked - although there was a little mistake on the divs too</p>
  <pre><code>const arrowEase = document.querySelectorAll('.arrow-start');
  
  for (var i = 0 ; i &lt; arrowEase.length; i++) (function(i){
      arrowEase[i].addEventListener('click', onclick);
  
      arrowEase[i].onclick = function(){
          function moveit(timestamp, els, dist, duration) {
  
              var timestamp = timestamp || new Date().getTime()
              var runtime = timestamp - starttime
              var progress = runtime / duration
              var dist = 600
              progress = Math.min(progress, 1)
              els.forEach(el =&gt; {
                el.style.width = (dist * progress).toFixed(2) + 'px'
              })
              if (runtime &lt; duration) {
                  requestAnimationFrame(function (timestamp) {
                      moveit(timestamp, els, dist, duration)
                  })
              }
          }
      
          requestAnimationFrame(function (timestamp) {
              starttime = timestamp || new Date().getTime()
              moveit(timestamp, arrowEase, 400, 1000)
          })
      }
      
  })(i);
  </code></pre>