Does onclick Syntax for async arrow function work only with Id?

Question

This is part of my code. I just wanted to know why document.getElementById("myName").onclick works and document.getElementByClassName("myClass").onclick does not work in the following onclick arrow function example?

Does onclick arrow function take document selector as ID by default or support only Id?

What if i want to implement onclick to class in this case?

//myName.onclick = async () => {   //even this representation works
document.getElementById("myName").onclick = async () => {
 try {
    //some code here which call some async function (not related so not writing here) 
    alert('clicked.');
  } catch(e) {
   log(e);
  }
};

<html>
<button id="myName" class="myClass"><strong>Click me</strong></button>
</html>

`$("#myName").onclick` doesn't work because jQuery doesn't have an `onclick` method or property. It's `click(fn)` or `on('click', fn)`. Also I'd suggest using `addEventListener()` if you want to use native JS, not the `onclick` property. — Rory McCrossan, May 01 '20 at 12:01
What if i want to implement onclick to class in this case? cant i? — Sashi, May 01 '20 at 12:02
An `async` event handler is pointless; the browser will pay no attention to the value returned (the Promise) — Pointy, May 01 '20 at 12:03
@Pointy, but what if you want to `await` in it :p - though, `async` (and even the differentiation between normal and arrow function) is completely irrelevant to the question anyway — Jaromanda X, May 01 '20 at 12:06
`What if i want to implement onclick to class in this case? cant i?` Of course, just use a class selector in the jQuery object. I'd suggest researching the basics of jQuery: https://learn.jquery.com/ and also referring to the documentation: https://api.jquery.com — Rory McCrossan, May 01 '20 at 12:09
https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — epascarello, May 01 '20 at 13:04

Hien Nguyen · Answer 1 · 2020-05-01T13:13:34.917

3

Method getElementsByClassName return array of elements, you need use index to get element and assign event to.

document.getElementsByClassName("myClass")[0].onclick

If you use jquery, don't need get index only use

$(".myClass").click(() =>{
    alert("ok");
});

//myName.onclick = async () => {   //even this representation works
document.getElementsByClassName("myClass")[0].onclick = async () => {
 try {
    //some code here which call some async function (not related so not writing here) 
    alert('clicked.');
  } catch(e) {
   log(e);
  }
};

$(".myClass").click(() =>{
    alert("ok");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<button id="myName" class="myClass"><strong>Click me</strong></button>
</html>

edited May 01 '20 at 13:13

answered May 01 '20 at 12:47

Hien Nguyen

24,551
7
52
62

Thankyou soo much and is there a way to write it using jquery `(".myclass").onclick = async () => {` something like this – Sashi May 01 '20 at 12:57
@Sashi , you can use `$(".myclass")[0]` – Ludolfyn May 01 '20 at 13:01
No need get index when using jquery, I updated answer – Hien Nguyen May 01 '20 at 13:13

Ludolfyn · Answer 2 · 2020-05-01T13:02:37.520

It's not working because document.getElementById() returns a single DOM node (to which you can attach an eventListener), but document.getElementsByClassName() returns an array of DOM nodes (to which you can NOT attach an eventListener).

document.getElementsByClassName() is usually used for selecting multiple elements, hence the 's' in 'elements' in .getElementsByClassName(), which is missing in your question.

You can either loop through the array or select the array index.

score 0 · Answer 3 · answered May 01 '20 at 13:53

There are couple of questions in the post and these are the fitting answers for all of them.

1) Does onclick Syntax for async arrow function work only with Id? ANSWER: No

2) Does onclick arrow function only support document selector as ID in this representation? myName.onclick = async () => { ANSWER: Yes.

Example: if element has id as idName <button id="idName" class="className">

the representation can be like this idName.onclick = async () => {

and cannot be like this className.onclick = async () => {

3) document.getElementsByClassName() returns an array of DOM nodes so we need to loop through the array or select the array index.

4) The Exact representation using classname in Jquery is

$(".myClass").click( async () => {

and in Javascript is

document.getElementsByClassName("myClass")[0].onclick = async () => {

Thanks for everyone who took time and answered my questions. All your answers are close and in a way helped me to solve my problem. But as there we no exactly fitting answers for all of them im posting my answer which worked out — Sashi, May 01 '20 at 13:54

Does onclick Syntax for async arrow function work only with Id?

3 Answers3