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

Question

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

Comment trouver l'id du bouton est 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()
{
}

199

html javascript

demandé sur Peter Mortensen 2011-01-28 08:53:14

13 réponses

score 440 · Answer 1

vous devez envoyer L'ID comme paramètres de la fonction. Faites comme ceci:

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

envoyer l'IDENTIFIANT this.id comme clicked_id que vous pouvez utiliser dans votre fonction. Voir en action ici.

score 47 · Answer 2

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 à effectuer sur ces éléments.

Lorsqu'un gestionnaire d'événements est appelé, il est appelé dans le contexte de l'élément qui a été cliqué. Donc, l'identifiant ce se réfère à l'élément DOM sur lequel vous avez cliqué. Vous pouvez alors accéder attributs de l'élément par l'intermédiaire de cet identificateur.

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>

score 33 · Answer 3

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

vous pouvez opter pour une délégation...

<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 exige que vous soyez relativement à l'aise avec le modèle d'événement farfelu.

score 24 · Answer 4

EN JAVASCRIPT PUR: Je sais qu'il est tard, mais peut-être pour les gens du futur qu'il peut aider:

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

ainsi, nous n'aurons pas à lier l '" id " de L'élément lors de l'appel de la fonction javascript.

score 21 · Answer 5

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

score 13 · Answer 6

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

$('.clickMe').click(function(){
    var clickedID = this.id;
});

score 10 · Answer 7

comment faire sans JavaScript en ligne

il est généralement recommandé d'éviter le JavaScript en ligne, mais il y a rarement un exemple de la façon de le faire.

Voici ma façon d'attacher des événements aux boutons.

Je ne suis pas entièrement satisfait de combien de temps la méthode recommandée est comparée à un attribut simple onClick .

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>

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>

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 lancer ceci avant que le document soit prêt, en cliquant sur les boutons fonctionnera parce que nous attachons l'événement au document.

voici un jsfiddle "1519260920

" Pour quelque étrange raison, le insertHTML ne fonctionne pas, même si il fonctionne dans tous mes navigateurs.

vous pouvez toujours remplacer insertHTML par document.write si vous ne faites pas attention c'est drawbacks

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

Sources:

score 6 · Answer 8

avec javascript pur, vous pouvez faire ce qui suit:

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

vérifier JsFiddle

score 5 · Answer 9

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

score 4 · Answer 10

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

score 3 · Answer 11

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

});

score 2 · Answer 12

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;

score 0 · Answer 13

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

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

cela permet d'identifier n'importe quel bouton cliqué.

si vous voulez juste obtenir la valeur du bouton cliqué dans un certain endroit, il suffit de les mettre dans le conteneur comme

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

et changer le code en: -

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

j'espère que cette aide

Las etiquetas más populares

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

13 réponses

comment faire sans JavaScript en ligne

navigateurs modernes seulement

Cross-browser

Cross-browser avec jQuery