Синтаксис onclick для функции asyn c работает только с Id? - PullRequest
Новая
       0

Синтаксис onclick для функции asyn c работает только с Id?

0 голосов
/ 01 мая 2020

Это часть моего кода. Я просто хотел узнать, почему document.getElementById("myName").onclick работает и document.getElementByClassName("myClass").onclick не работает в следующем примере функции стрелки onclick?

Принимает ли функция стрелки onclick селектор документа как идентификатор по умолчанию или поддерживает только идентификатор?

Что если я хочу реализовать onclick для класса в этом случае? 

//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>

Ответы [ 3 ]

3 голосов
/ 01 мая 2020

Метод getElementsByClassName возвращает array элементов, вам нужно использовать индекс, чтобы получить элемент и назначить событие. 

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

Если вы используете jquery, вам не нужно использовать только индекс, используйте 

$(".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>
0 голосов
/ 01 мая 2020

В сообщении есть пара вопросов, и это подходящие ответы на все из них.

1) Синтаксис onclick для функции asyn c работает только с Id? ОТВЕТ: Нет

2) Функция стрелки onclick поддерживает только селектор документа как идентификатор в этом представлении? myName.onclick = async () => { ОТВЕТ: Да.

Пример: если элемент имеет идентификатор как idName <button id="idName" class="className">

представление может быть таким idName.onclick = async () => {

и не может быть таким className.onclick = async () => {

3) document.getElementsByClassName () возвращает массив узлов DOM, поэтому нам нужно l oop через массив или выбрать индекс массива.

4) Точное представление с использованием имени класса в Jquery: 

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

, а в Javascript есть 

document.getElementsByClassName("myClass")[0].onclick = async () => {
0 голосов
/ 01 мая 2020

Это не работает, потому что document.getElementById() возвращает один узел DOM (к которому вы можете присоединить eventListener), но document.getElementsByClassName() возвращает array узлов DOM (к которому вы НЕ можете присоединить eventListener ).

document.getElementsByClassName() обычно используется для выбора нескольких элементов, следовательно, 's' in 'elements' в .getElementsByClassName(), который отсутствует в вашем вопросе.

Вы можете либо l oop через массив или выбрать индекс массива.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...