web-dev-qa-db-fra.com

JavaScript - onClick pour obtenir l'ID du bouton cliqué

Comment trouver l'id du bouton sur lequel vous cliquez?

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

function reply_click()
{
}
javascripthtml
218
Bin Chen

Vous devez envoyer l'ID en tant que paramètres de fonction. Fais-le comme ça:

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

Cela enverra l'ID this.id en tant que clicked_id que vous pourrez utiliser dans votre fonction. Voir en action ici.

470
shamittomar

En général, les choses sont plus faciles à organiser si vous séparez votre code et votre balisage. Définissez tous vos éléments, puis dans votre section JavaScript, définissez les différentes actions à exécuter sur ces éléments.

Lorsqu'un gestionnaire d'événement est appelé, il l'est dans le contexte de l'élément sur lequel l'utilisateur a cliqué. Ainsi, l'identifiant this fera référence à l'élément DOM sur lequel vous avez cliqué. Vous pouvez ensuite accéder aux attributs de l'élément via cet identifiant.

Par exemple:

<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>
52
Jason LeBrun

(Je pense que l'attribut id doit commencer par une lettre. Peut-être erroné.)

Vous pouvez aller pour la délégation d'événement ...

<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);
    }
}

... mais cela nécessite que vous soyez relativement à l'aise avec le modèle d'événement farfelu.

34
sdleihssirhc

UTILISER PURE JAVASCRIPT: Je sais qu’il est tard, mais il peut aider les futurs utilisateurs:

Dans la partie HTML:

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

Dans le contrôleur Javascipt:

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

De cette façon, nous n'avons pas à lier le 'id' de l'élément au moment d'appeler la fonction javascript.

25
Prateek
<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;
}
24
Mohanraj
<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>
18
Jay

Comment le faire sans JavaScript

il est généralement recommandé d'éviter JavaScript en ligne, mais il existe rarement un exemple montrant comment le faire.
Voici comment associer des événements à des boutons.
Je ne suis pas entièrement satisfait de la durée de comparaison de la méthode recommandée à un attribut onClick simple. 

Navigateurs modernes seulement

<!DOCTYPE html>
<html>
<head>
<script>
(function(doc){
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }
    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>

Multi-navigateur

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

Cross-browser avec 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>

Vous pouvez l'exécuter avant que le document ne soit prêt. Il suffit de cliquer sur les boutons pour que l'événement soit associé au document.

Voici un jsfiddle
Pour une raison étrange, la fonction insertHTML ne fonctionne pas même si elle fonctionne dans tous mes navigateurs.

Vous pouvez toujours remplacer insertHTML par document.write si cela ne vous dérange pas inconvénients

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

Sources:

11
Timo Huovinen

Avec du javascript pur, vous pouvez effectuer les opérations suivantes:

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);
    };
}​

check it On JsFiddle

6
codercat

Vous pouvez simplement le faire de cette façon: 

<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);
   }

5
user3262563
<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)
}
4
gest

Si vous ne voulez passer aucun argument à la fonction onclick, utilisez simplement event.target pour obtenir l'élément sur lequel vous avez cliqué

<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);
}
3
A-Sharabiani
 <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;

});
3
tilak

Bouton 1 Bouton 2 Bouton 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;
2
XYZ

Désolé, c'est une réponse tardive, mais c'est vraiment rapide si vous faites ceci: -

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

Cela obtient l'ID de n'importe quel bouton cliqué.

Si vous voulez juste obtenir la valeur du bouton cliqué à un certain endroit, mettez-les simplement dans un conteneur comme 

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

et changez le code en: -

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

J'espère que ça aide

0
wayneuk2