Obtendo o ID do botão clicado usando OnClick - JavaScript

Às vezes, os programadores precisam determinar o ID atribuído dos elementos HTML, como um botão. Suponha que o desenvolvedor deseja obter o ID no evento de clique do botão, ou seja, quando o botão específico é clicado, o ID atribuído será exibido no console ou em uma mensagem de alerta.

Esta posta.

Como obter/acessar o ID do botão clicado usando OnClick em JavaScript?

Para obter/acessar o ID do botão clicado, use as seguintes abordagens:

• "evento.alvo.ID ”atributo
• "esse.ID ”atributo

Método 1: Obtenha o ID do botão clicado usando “Evento.alvo.ID ”atributo

Use o "evento.alvo.eu ia”Atributo para obter o ID do botão clicado no associado“ONCLICKEvento. Refere -se ao “eu iaPropriedade do elemento que desencadeou o evento na árvore Dom.

Exemplo

Em um arquivo HTML, crie cinco botões atribuindo IDs diferentes, “BTN1 "," BTN2 "," BTN3 "," BTN4 "e" BTN5”, Respectivamente. Anexe um “ONCLICK”Evento que chamará o“getid ()”Função no botão Clique:

Botão
Botão
Botão
Botão
Botão

Criar uma área usando o

Tag para exibir o respectivo ID do botão no botão Clique:

Agora, defina uma função chamada “getid ()”Isso acionará o evento de clique do botão para obter e exibir o ID atribuído, respectivamente, usando o“evento.alvo.eu ia”:

function getId ()
var btnid = evento.alvo.eu ia;
documento.getElementById ("resultado").INNERHTML = "O ID do botão clicado é:" + btnid;

A saída indica que os respectivos IDs dos botões foram exibidos com sucesso:

Método 2: Obtenha o ID do botão clicado usando “this.ID ”atributo

Você também pode utilizar o “esse.eu ia”Atributo para acessar o ID do botão clicado. O "esse.eu ia" refere-se a "eu ia”Atributo do objeto atual. Em um ouvinte de evento DOM, refere -se ao “eu ia”Da instância do elemento para onde o ouvinte estava anexado.

Exemplo

Aqui, no exemplo dado, chamaremos o “getid ()”Função no evento OnClick do botão, passando o“esse.eu ia”Atributo como um parâmetro que retornará o ID do elemento especificado:

Botão
Botão
Botão
Botão
Botão

Agora, no arquivo javascript, defina uma função “getid ()”Ao passar o ID do botão como um argumento que acionará o clique do botão:

função getId (btnid)
documento.getElementById ("resultado").INNERHTML = "O ID do botão clicado é:" + btnid;

Saída

Isso se trata de obter o ID do botão clicado usando o OnClick em JavaScript.

Conclusão

Para obter o ID do botão clicado no “ONCLICKEvento, use o “evento.alvo.eu iaAtributo ou o “esse.eu ia”Atributo. ““esse.eu ia”Referiria -se ao“eu ia”Da instância do elemento ao qual o ouvinte foi anexado, enquanto“evento.alvo.eu ia”Referiria -se ao“eu ia”Do elemento que realmente desencadeou o evento, que pode ser um elemento infantil do elemento que o ouvinte foi anexado. Nesta postagem, definimos o procedimento para obter o ID do botão clicado usando o evento OnClick.