.addEventListener function argument not accepting a parameter?

I’m in the course on section about Event Listeners - https://www.codecademy.com/courses/build-interactive-websites/lessons/dom-events/exercises/event-handlers - and can’t work out why the function that is passed as part of the .addEventListener method can’t carry a parameter to be passed into the function.

I’ve adapted the code form the exercise here:

let readMore = document.getElementById('read-more');
let moreInfo = document.getElementById('more-info');

// Write your code here:
function showInfo(param) {
  moreInfo.style.display = 'block';
  readMore.innerHTML = param;
}
readMore.addEventListener('click', showInfo('CLICKED') );

This came about as I was initially writing the .addEventListener() method as:

readMore.addEventListener('click', showInfo() );

on the basis that showInfo is a function, and therefore should be able to be written as showInfo() but it didn’t like the () there… which is what got me thinking, if you can’t write the function (thats passed as an argument of the .addEventListener() method, that is itself a function with 2 arguments), then how would you pass something into the function that fires on click?
In my example, I’m trying to pass in the ‘CLICKED’ string into showInfo() function to become the text the button shows when clicked, but it doesn’t seem to work.

Is this something to do with the .addEventListener() method or am I missing somehting obvious?
Thanks

Hi,
I don’t think it’s obvious. I’m studying the intermediate javascript lesson on modules using es6 syntax and there is a part where they mention how to call a function with an argument inside an event listener.

They use arrow notation so I think your solution would look like this

readMore.addEventListener(‘click’, () => { showInfo(‘CLICKED’)}

Here’s the page for your reference:
https://www.codecademy.com/courses/learn-intermediate-javascript/articles/implementing-modules-using-es-6-syntax

1 Like

Hey, @fieldstudio welcome to the forums.

Why are you adding a parameter to the function? I don’t see it in the directions.

Ah interesting - I was going to do the Intermediate JS course after this one, so will look out for that - I thought there must be a way to do it, but must also be a reason it wasn’t working as I thought it would’ve.
Thanks :slight_smile:

1 Like

It’s not in the directions - it was more a bit of a tangent I went on, to reinforce / explore ideas - initially when I was going thru the exercise, I tried:

readMore.addEventListener('click', showInfo() );

with the showInfo being a function, I assumed it could be written as showInfo() so an argument could be passed into the function body - it didn’t work however, which confused me - without the () it worked, but that felt odd - showInfo is a function, so why couldn’t it be written as showInfo()?

You can use this:

<script>
readMore.onclick=function showInfo(param) {
  moreInfo.style.display = 'block';
  readMore.innerHTML = param;
}
</script>

This should work. I also have this problem when I use addEventListiner

1 Like

These callback functions can be a tricky concept.
The idea is that one of the arguments will be a function that will be applied to something internally.

For example,

function over7(x) { 
  return (x > 7);
} 
// can also be written as: const over7 = x => x > 7;

const arr = [3, 5, 7, 9, 12];
const arrOver7 = arr.filter(over7);
console.log(arrOver7); // output: [9, 12]

Notice that over7 is used as the argument for the .filter method , not over7()
because the argument must be the function which you want to apply.

over7() would not give you the function itself, but what that function returns with no argument.