Which is a valid statement for assigning the JS click events

Question

I'm new to JS, currently learning it and need your help. Below is just a sample of some code I came up with, and my question is: Which OF THE FOLLOWING is a valid statement for assigning the JS click events?

a. mButtons.forEach(e => e.click = process);
b. mButtons.forEach(e => e.onAction = process);
c. mButtons.forEach(e => e.onclick = process);
d. mButtons.forEach(e => e.onProcess = process);
e. None of the ABOVE

<body>

      <button>1</button>
      <button>2</button>
      <button>3</button>

      <script>
            let buttons = documnet.querySelectorAll("button");
            let mButtons = Array.from(buttons);

            const process = function () {
                  console.log({
                        question: 17,
                        date: new Date(),
                        label: this.innerText
                  });
            }
      </script>
</body>

`e. None of the above`. Use `e.addEventListener(’click’, process)` — Lennholm, Mar 03 '20 at 23:48
PS: https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick — Roko C. Buljan, Mar 03 '20 at 23:50

Sunil Lama · Accepted Answer · 2020-03-03T23:43:59.963

0

The answer is c. You have to bind the onclick

<body>

<button>1</button>
<button>2</button>
<button>3</button>

<script>

  let buttons = document.querySelectorAll("button");
  let mButtons = Array.from(buttons);

  const process = function(){
      console.log({question: 17, date: new Date(), label: this.innerText});
  }
  mButtons.forEach(e => e.onclick = process);

</script>
</body>

edited Mar 03 '20 at 23:43

answered Mar 03 '20 at 23:42

Sunil Lama

4,531
1
18
46

FYI `querySelectorAll` has already a `forEach` method natively, so no need to `Array.from` – Roko C. Buljan Mar 03 '20 at 23:47
@Roko alas, it's in OP's "code", there are many improvements that could be made. If this wasn't just a "do my homework for me" question I'd point out that `e.onclick = something` is a _terrible_ way to bind an event handler. – Stephen P Mar 03 '20 at 23:49
1

Unfortunately, this is what we do in class !! I’ll be sure to learn JS from a legit source besides skool!! – user10366078 Mar 03 '20 at 23:51
@RokoC.Buljan It's not [IE Compatible](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Browser_Compatibility) – nick zoum Mar 03 '20 at 23:52
@nickzoum I'm trying to forget IE is *still a thing (?)* PS... https://stackoverflow.com/a/32664363/383904 – Roko C. Buljan Mar 03 '20 at 23:54
@RokoC.Buljan There's unfortunately quite a few people that still use it. – nick zoum Mar 03 '20 at 23:56
1

@nickzoum Neither is `Array.from()`, so that’s still useless as a fallback solution and pointless – Lennholm Mar 03 '20 at 23:56
@Lennholm Can use `[].slice.call` or `[].forEach.call` – nick zoum Mar 03 '20 at 23:57
`if (navigator.userAgent.search('MSIE') > 0) window.location.href = "http://goatse.cx";` – Stephen P Mar 04 '20 at 00:09

Which is a valid statement for assigning the JS click events

1 Answers1