295

Como encontrar o ID do botão que está sendo clicado?

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

function reply_click()
{
}

javascript html Bin Chen
fonte

17

@Robin van Baalen: os IDs não devem ser numéricos por convenção, mas podem ser.

williambq

596

Você precisa enviar o ID como os parâmetros de função. Faça isso deste modo:

<button id="1" onClick="reply_click(this.id)">B1</button>
<button id="2" onClick="reply_click(this.id)">B2</button>
<button id="3" onClick="reply_click(this.id)">B3</button>
    
<script type="text/javascript">
  function reply_click(clicked_id)
  {
      alert(clicked_id);
  }
</script>

Expandir snippet

Isso enviará o ID this.idcomo o clicked_idqual você pode usar em sua função. Veja em ação aqui.

shamittomar
fonte

2

Eu só queria observar que, para quem obtém uma exceção de referência nula usando o JQuery event.target.id(para mim, o Firefox e o IE estavam lançando), essa é uma ótima solução que funciona nos três principais navegadores.

X3074861X 08/08

2

Irmão, você é a única pessoa na internet que conseguiu interpretar para mim o modo como isso funciona. Usar uma variável no nome da função e usar outra no script da função real não fazia absolutamente nenhum sentido para mim! Em uma frase curta, você me explicou que a variável que colocamos entre parênteses da função () e a que usamos na declaração da função é a mesma coisa, apenas repassada ao AS! Isto é brilhante ! Obrigado meu senhor para a sabedoria que me outorgou

Denislav Karagiozov

Você realmente não quer nenhum código no seu html, como <button onClick = "">

Dave Jacoby

61

Em geral, é mais fácil manter as coisas organizadas se você separar seu código e sua marcação. Defina todos os seus elementos e, na seção JavaScript, defina as várias ações que devem ser executadas nesses elementos.

Quando um manipulador de eventos é chamado, ele é chamado no contexto do elemento em que foi clicado. Então, o identificador esta fará referência ao elemento DOM que você clicou. Você pode acessar os atributos do elemento através desse identificador.

Por exemplo:

<button id="1">Button 1</button>
<button id="2">Button 2</button>
<button id="3">Button 3</button>

<script type="text/javascript">
var reply_click = function()
{
    alert("Button clicked, id "+this.id+", text"+this.innerHTML);
}
document.getElementById('1').onclick = reply_click;
document.getElementById('2').onclick = reply_click;
document.getElementById('3').onclick = reply_click;
</script>

Jason LeBrun
fonte

1

e se os botões estiverem em um repetidor e, portanto, gerados dinamicamente, para que você não saiba quantos botões terá?

Amc_rtty 26/10/12

4

Existem várias maneiras de lidar com isso. Por exemplo, gere o javascript dinamicamente. Ou adicione a mesma classe a todos os botões e percorra todos os botões com esse nome de classe e anexe o manipulador dessa maneira.

26612 Jason LeBrun

@JasonLeBrun Não sei qual é o ID do elemento no qual vou clicar. É isso que estou procurando. Um código desenha um elemento SVG e quando clico nele, preciso saber o seu atributo "id". Se e como esse código pode ser usado?

Arihant

46

USANDO O JAVASCRIPT PURO: Eu sei que é tarde, mas pode ser para as pessoas futuras que ele pode ajudar:

Na parte HTML:

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

No Javascipt Controller:

function reply_click()
{
    alert(event.srcElement.id);
}

Dessa forma, não precisamos vincular o 'id' do elemento no momento da chamada da função javascript.

Prateek
fonte

1

Eu gosto dessa idéia para funcionalidade dinâmica. Estou trabalhando para adicionar funções a um banco de dados dinâmico usando PHP / MySQL e JS; isso funciona bem para adicionar uma função específica a classes dinâmicas específicas. Obrigado!

ejbytes

@codeling você pode compartilhar os detalhes do navegador e do ambiente?

Prateek

@Prateek Firefox, mais recente. Eu só precisava da fonte, então trabalhei em torno dela agora, passando thiscomo parâmetro onClick( na verdade, não usando onClick, mas onChange, esse talvez seja o problema?). Eu também verifiquei um pouco e parece haver muita confusão sobre essa eventvariável - é um parâmetro "implícito" ou deve ser declarado explicitamente como argumento (ou seja function reply_click(event), que também vi em alguns locais)? Está disponível apenas ao atribuir o ouvinte de eventos via addEventListener...? Eu brinquei, mas não consegui fazê-lo funcionar.

codeling

3

FYI: O objeto de evento global está disponível no chrome, não no firefox.

DaveEdelstein

40

(Acho que o idatributo precisa começar com uma letra. Pode estar errado.)

Você poderia ir para a delegação do evento ...

<div onClick="reply_click()">
    <button id="1"></button>
    <button id="2"></button>
    <button id="3"></button>
</div>

function reply_click(e) {
    e = e || window.event;
    e = e.target || e.srcElement;
    if (e.nodeName === 'BUTTON') {
        alert(e.id);
    }
}

... mas isso exige que você esteja relativamente confortável com o modelo de evento maluco.

sdleihssirhc
fonte

1

Isso não vai funcionar. Você especificou o código no atributo onclick que chama reply_click sem argumentos. Portanto, nenhum argumento de evento será passado para a função

Jason LeBrun

1

E o valor do atributo "id" pode ser qualquer sequência. Não precisa começar com uma carta.

Jason LeBrun

@ Jason Na verdade, em todos os bons navegadores modernos, o eargumento é gerado automaticamente. Caso contrário, devemos lidar com o IE6-8, que fornece esse objeto útil via window.event.

sdleihssirhc

@ Jason Também, os IDs não podem começar com um número .

precisa saber é o seguinte

6

@sdleihssirhc Na verdade, você é arrogante, tudo isso muda com o HTML5 .

precisa saber é o seguinte

28

<button id="1" onClick="reply_click(this)"></button>
<button id="2" onClick="reply_click(this)"></button>
<button id="3" onClick="reply_click(this)"></button>

function reply_click(obj)
{
var id = obj.id;
}

Mohanraj
fonte

18

<button id="1" class="clickMe"></button>
<button id="2" class="clickMe"></button>
<button id="3" class="clickMe"></button>

<script>
$('.clickMe').click(function(){
    alert(this.id);
});
</script>

Jay
fonte

14

Como fazer isso sem JavaScript embutido

geralmente é recomendável evitar o JavaScript embutido, mas raramente existe um exemplo de como fazê-lo.
Aqui está a minha maneira de anexar eventos aos botões.
Não estou totalmente satisfeito com quanto tempo o método recomendado é comparado a um onClickatributo simples .

Apenas navegadores 2014

<button class="btn">Button</button>
<script>
let OnEvent = (doc) => {
    return {
        on: (event, className, callback) => {
            doc.addEventListener('click', (event)=>{
                if(!event.target.classList.contains(className)) return;
                callback.call(event.target, event);
            }, false);
        }
    }
};


OnEvent(document).on('click', 'btn', function (e) {
    window.console.log(this, e);
});

</script>

Apenas navegadores 2013

<!DOCTYPE html>
<html>
<head>
<script>
(function(doc){
    var hasClass = function(el,className) {
        return el.classList.contains(className);
    }
    doc.addEventListener('click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault();
          doSomething.call(e.target, e);
      }
    });
})(document);

function insertHTML(str){
  var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML("beforebegin", str);
}

function doSomething(event){
  console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script>
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>

<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">

<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>

</body>
</html>

Cross-browser

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var cb_addEventListener = function(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, false);
            return true;
        } 
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return true;
        }
        return false;
    };
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }

    cb_addEventListener(doc, 'click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          doSomething.call(e.target, e);
      }
    });
})(document);

function insertHTML(str){
  var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML("beforebegin", str);
}

function doSomething(event){
  console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script type="text/javascript">
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>

<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">

<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>

</body>
</html>

Navegador cruzado com jQuery

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function($){
    $(document).on('click', '.click-me', function(e){
      doSomething.call(this, e);
    });
})(jQuery);

function insertHTML(str){
  var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML("beforebegin", str);
}

function doSomething(event){
  console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script type="text/javascript">
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>

<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">

<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>

</body>
</html>

Você pode executar isso antes que o documento esteja pronto. Clicar nos botões funcionará porque anexamos o evento ao documento.

Aqui está um jsfiddle
Por algum motivo estranho, a insertHTMLfunção não funciona nela, mesmo que funcione em todos os meus navegadores.

Você sempre pode substituir insertHTMLpor document.writese não se importa com as desvantagens

<script>
document.write('<button class="click-me" id="btn1">Button 1</button>');
</script>

Fontes:

Timo Huovinen
fonte

Sempre me pergunto como os eventos podem ser tão eficientes (em termos de desempenho) quanto os onclicks embutidos. Eu acho que eles devem ser mais difíceis de acompanhar?

gabn88

depende de sua convenção de nomenclatura de classe, se a convenção é significativo, então ele vai ser tão fácil de encontrar como onclicks

Timo Huovinen

11

Se você não deseja passar nenhum argumento para a função onclick, use event.targetpara obter o elemento clicado:

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

function reply_click()
{
    // event.target is the element that is clicked (button in this case).
    console.log(event.target.id);
}

A-Sharabiani
fonte

7

Com o javascript puro, você pode fazer o seguinte:

var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i < buttonsCount; i += 1) {
    buttons[i].onclick = function(e) {
        alert(this.id);
    };
}

verificá-lo em JsFiddle

codercat
fonte

1

Seu código diz: TypeError não capturado: Não é possível definir a propriedade 'onclick' de undefined

alex351

1

isso é porque você não tem botões no seu html

vidstige

6

Você pode simplesmente fazê-lo desta maneira:

<input type="button" id="1234" onclick="showId(this.id)" value="click me to show my id"/>
<script type="text/javascript">
   function showId(obj) {
        var id=obj;
        alert(id);
   }

user3262563
fonte

Você poderia cortar o var id=obj;e apenas sealert(obj);

Doge

Acho que essa deve ser a resposta aceita e "(this.id)" funcionou para mim agora no FF, IE e Chrome.

Jon Coombs

6

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

function reply_click()
{
   console.log(window.event.target.id)
}

gest
fonte

4

 <button id="1"class="clickMe"></button>

<button id="2" class="clickMe"></button>

<button id="3" class="clickMe"></button>



$('.clickMe').live('click',function(){

var clickedID = this.id;

});

tilak
fonte

3

Botão 1 Botão 2 Botão 3

var reply_click = function() { 
     alert("Button clicked, id "+this.id+", text"+this.innerHTML); 
} 
document.getElementById('1').onclick = reply_click; 
document.getElementById('2').onclick = reply_click; 
document.getElementById('3').onclick = reply_click;

XYZ
fonte

2

Desculpe, é uma resposta tardia, mas é muito rápida se você fizer isso: -

$(document).ready(function() {
  $('button').on('click', function() {
     alert (this.id);
  });
});

Isso obtém o ID de qualquer botão clicado.

Se você deseja obter apenas o valor do botão clicado em um determinado local, basta colocá-lo em um recipiente como

<div id = "myButtons"> buttons here </div>

e altere o código para: -

 $(document).ready(function() {
      $('.myButtons button').on('click', function() {
         alert (this.id);
      });
    });

Eu espero que isso ajude

wayneuk2
fonte

1

Eu acho que myButtons é um id e você está usando-o como um seletor de classe no jquery com um ponto (.). Acho que isso deve começar com #.

Shashi verma

0

Isso registrará o ID do elemento que foi clicado: addFields.

<button id="addFields" onclick="addFields()">+</button>

<script>

function addFields(){ 
    console.log(event.toElement.id)
}

</script>

alecbaldwin
fonte

JavaScript - onClick para obter o ID do botão clicado

Respostas:

Como fazer isso sem JavaScript embutido

Apenas navegadores 2014

Apenas navegadores 2013

Cross-browser

Navegador cruzado com jQuery