1

I cannot seem to use the method name "all()" when using it inside an onclick(), onmouseover() or similar dom events. No errors, just nothing.

However, using the addEventListener construct works perfectly fine.

A very simple problematic page is as follows.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>

  <!--THIS DOES NOT WORK-->
  <button id="myBtn" onclick="all()">Click Me</button>

  <script>
    //HOWEVER THIS WORKS (uncomment first)
    //document.querySelector('#myBtn').addEventListener('click', all);

    function all() {
      console.log('all clicked');
    }
  </script>
</body>

</html>

I've tried putting the all() method before the call, to no avail. Has left me scratching my head. Has anyone ever run into this before?

abhiyanp
  • 73
  • 8
  • 1
    First guess: it's conflicting with [`document.all`](https://developer.mozilla.org/en-US/docs/Web/API/Document/all), but I'm far from certain. – Scott Sauyet Sep 09 '19 at 14:24
  • 1
    @ScottSauyet Thanks for the quick reply. The thing is, when calling all() on the console, it works. With addEventListener it works. I'm more of a backend guy myself, but this was asked to me by someone else on the team and I was like..huh, what the.. – abhiyanp Sep 09 '19 at 14:26
  • 1
    It's a common failing with intrinsic event attributes. Just don't use them. `addEventListener` is the better option and has been for a couple of decades or so. – Quentin Sep 09 '19 at 14:30
  • But addEventListener do not work everywhere ;-) – Jan Sep 09 '19 at 14:58

0 Answers0