e.preventDefault() isn't working in an es6 arrow function loop

Question

I can't get prevent default to work in an arrow function.

addEventListener on a querySelectorAll() with classList

I wanna do it the es6 way.

var clickers = document.querySelectorAll('.clicker');

clickers.forEach(clicker => 
  clicker.addEventListener("click", (e) => 
    e.preventDefault();
    console.log("i clicked")
  )
);

<a href="#" class="clicker">test</a>
<a href="#" class="clicker">test</a>

I'm getting this error:

"Uncaught SyntaxError: missing ) after argument list

JavaScript: SyntaxError: missing ) after argument list

This isn't es6 so this answer doesn't suffice

What I find is when you delete prevent default it goes away

var clickers = document.querySelectorAll('.clicker');

clickers.forEach(clicker => 
  clicker.addEventListener("click", (e) => 
    console.log("i clicked")
  )
);

<a href="#" class="clicker">test</a>
<a href="#" class="clicker">test</a>

But the the behavior is it goes to top of page when you click, or rather doesn't prevent default

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list

I checked the resource above but wasn't helpful in the specific context.

How do you fix this error? How do you prevent default in an es6 arrow function loop?

Two statements in a function, you need `(e) => { ....; .....; }` — Wiktor Zychla, Jul 23 '21 at 17:45
explains it in the docs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions — epascarello, Jul 23 '21 at 17:47

score 2 · Answer 1 · answered Jul 23 '21 at 17:49

2

You are missing the curly braces after the arrow in the arrow function. For a multiline arrow function curly braces are required for the block.

var clickers = document.querySelectorAll('.clicker');

clickers.forEach(clicker => 
  clicker.addEventListener("click", (e) => {
    e.preventDefault();
    console.log("i clicked")
  })
);

<a href="#" class="clicker">test</a>
<a href="#" class="clicker">test</a>

answered Jul 23 '21 at 17:49

Narayanan Ramanathan

1,310
10
18

*"For a multiline arrow function ..."* It's not about the number of lines but the kind of syntax that is used inside the function body. The body can either be a single expression (that can be written over as many lines as desired) or a "block" (it's not really a block but it looks like one), with any number of statements. – Felix Kling Jul 23 '21 at 18:19

Alireza Ahmadi · Answer 2 · 2021-07-23T18:22:32.337

1

You need to {} for more than one statements.

Note that the second parameter is callback function that can be passed in a different way. The base form is: clicker.addEventListener("click", function (e) { })

But you can use lambda expression too, in modern browsers.

var clickers = document.querySelectorAll('.clicker');

clickers.forEach(clicker => 
  clicker.addEventListener("click", (e) => 
  {  e.preventDefault();
    console.log("i clicked");
  })
);

<a href="#" class="clicker">test</a>
<a href="#" class="clicker">test</a>

edited Jul 23 '21 at 18:22

answered Jul 23 '21 at 17:57

Alireza Ahmadi

8,579
5
15
42

*"You need to {} for more than one statements."* That's also not quite right. You need `{}` for any number of statements (no statement, one statement or multiple statements). You can only omit the `{}` if the body is an *expression*. E.g. `() => if (true) { return 42; }` is not valid syntax even though there is only one statement. – Felix Kling Jul 23 '21 at 18:24

e.preventDefault() isn't working in an es6 arrow function loop

2 Answers2