Move function outside the loop

Question

I'm trying to take the function outside the loop and then call it from within, but I'm not sure how to do it.

const links = document.querySelectorAll( 'a' );

for ( let i = 0; i < links.length; i++ ) {

    links[i].addEventListener( 'click', ( event ) => {
        const targetID = '#' === event.currentTarget.getAttribute( 'href' ) ? 'start' : event.currentTarget.getAttribute( 'href' );
        ...rest of the function...
    } );
}

This is what I've tried so far:

const links = document.querySelectorAll( 'a' );

function smoothScrolling( event ) {
    const targetID = '#' === event.currentTarget.getAttribute( 'href' ) ? 'start' : event.currentTarget.getAttribute( 'href' );
    ...rest of the function...
}

for ( let i = 0; i < links.length; i++ ) {

    links[i].addEventListener( 'click', smoothScrolling( event ) );
}

I'm not sure why, but I'm getting the following error: Uncaught TypeError: Cannot read property 'currentTarget' of undefined.

func() is calling the function. func is referencing/passing the function. — yqlim
– yqlim, Commented Mar 13, 2019 at 1:10

Darrin Cullop · Accepted Answer · 2019-03-13 01:01:18Z

1

You've almost got it... The problem is that you're CALLING the function and passing the result. Instead, you just want to pass the function itself, like it was an object. Try this:

const links = document.querySelectorAll( 'a' );

function smoothScrolling( event )
{
     const targetID = '#' === event.currentTarget.getAttribute( 'href' ) ? 'start' : 
     event.currentTarget.getAttribute( 'href' );
     ...rest of the function...
}

for ( let i = 0; i < links.length; i++ )
{
    links[i].addEventListener( 'click', smoothScrolling );
}

By specifying the function without any arguments, it will be passed instead of being called. The way you did it, it is calling the smoothScrolling and then using the result of that, which is not what you want.

answered Mar 13, 2019 at 1:01

Darrin Cullop

1,20811 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rodrigo D'Agostino Over a year ago

Thanks you very much, my friend! That did the trick :) Sometimes I am so tired that I miss the most obvious things Dx

Collectives™ on Stack Overflow

Move function outside the loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related