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. ^^

const arrowEase = document.querySelectorAll('.arrow-start');

for (var i = 0 ; i < 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 < duration) {
            requestAnimationFrame(function (timestamp) {
                moveit(timestamp, el, dist, duration)
            })
        }
    }

    requestAnimationFrame(function (timestamp) {
        starttime = timestamp || new Date().getTime()
        moveit(timestamp, arrowEase, 400, 1000)
    })
};

asked for the html:

    <div id="impress">
      <div >
        Your browser doesn't support impress.js. Try Chrome or Safari.
      </div>
      
      <div  data-x="0" data-y="0">
        <div ><h1>Assistance-Leistungen bei Arbeitslosigkeit</h1></div>
        <div >
          <div >
          
            <div >
              <div >
              </div>
            </div>
          
            <div >
              <div >
              </div>
            </div>
          
            <div >
              <div >
              </div>
            </div>
            
          </div>

          <div >
            <div >
              <span >&times;</span>
              <h1>Bitte navigieren Sie mit den Pfeiltasten über die Seiten!</h1>
            </div>
          </div>
        </div>
      </div>
  </div>

this worked - although there was a little mistake on the divs too

const arrowEase = document.querySelectorAll('.arrow-start');

for (var i = 0 ; i < 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 => {
              el.style.width = (dist * progress).toFixed(2)   'px'
            })
            if (runtime < duration) {
                requestAnimationFrame(function (timestamp) {
                    moveit(timestamp, els, dist, duration)
                })
            }
        }
    
        requestAnimationFrame(function (timestamp) {
            starttime = timestamp || new Date().getTime()
            moveit(timestamp, arrowEase, 400, 1000)
        })
    }
    
})(i);

CodePudding user response：

You are pretty close to solutions but you pass an array of elements as 1 element. Try to modify it like this:

function moveElements(event){
    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 => {
          el.style.width = (dist * progress).toFixed(2)   'px'
        })
        
        if (runtime < duration) {
            requestAnimationFrame(function (timestamp) {
                moveit(timestamp, els, dist, duration)
            })
        }
    }

    requestAnimationFrame(function (timestamp) {
        starttime = timestamp || new Date().getTime()
        moveit(timestamp, arrowEase, 400, 1000)
    })
};

CodePudding user response：

looks like the first time you set the SAME two parameters, as events are unique through both, it‘s overridden, assuming the last element gets the event.

2nd example you define a function inside the handler, so it gwts a new reference and can be distinguished from others.