295

Comment trouver l'identifiant du bouton sur lequel on clique?

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

17

@Robin van Baalen: Les identifiants ne doivent pas être numériques par convention, mais ils peuvent l'être.

williambq

596

Vous devez envoyer l'ID comme 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>

Développer l'extrait

Cela enverra l'ID this.idque clicked_idvous pouvez utiliser dans votre fonction. Voyez-le en action ici.

shamittomar
la source

2

Je voulais juste noter que pour toute personne obtenant une exception de référence nulle en utilisant JQuery event.target.id(pour moi, Firefox et IE la lançaient), c'est une excellente solution qui fonctionne dans les trois principaux navigateurs.

X3074861X du

2

Frère, vous êtes la seule personne sur Internet qui a réussi à interpréter pour moi la façon dont cela fonctionne. Utiliser une variable dans le nom de la fonction et en utiliser une autre dans le script de fonction réel n'avait absolument aucun sens pour moi! Dans une courte phrase, vous m'avez expliqué que la variable que nous mettons dans les crochets de fonction () et celle que nous utilisons sur la déclaration de fonction sont la même chose, juste passée sur AS! C'est génial! Merci mon seigneur pour la sagesse que vous m'avez accordée

Denislav Karagiozov

Vous ne voulez pas vraiment de code dans votre html, comme <button onClick = "">

Dave Jacoby

61

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 sur lequel vous avez cliqué. Ainsi, l'identifiant cela 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>

Jason LeBrun
la source

1

que faire si les boutons sont dans un répéteur et donc générés dynamiquement, donc vous ne savez pas combien de boutons vous aurez?

Amc_rtty

4

Il y a plusieurs façons de gérer cela. Par exemple, générez dynamiquement le javascript. Ou, ajoutez la même classe à tous les boutons, puis parcourez tous les boutons avec ce nom de classe et attachez le gestionnaire de cette façon.

Jason LeBrun

@JasonLeBrun Je ne sais pas quel est l'identifiant de l'élément sur lequel je vais cliquer. Voilà ce que je recherche. Un code dessine un élément SVG et quand je clique dessus, j'ai besoin de savoir que c'est l'attribut "id". Si et comment utiliser ce code?

Arihant

46

UTILISATION DE PURE JAVASCRIPT: Je sais qu'il est tard mais peut être utile pour les futures personnes:

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 l'id de l'élément au moment d'appeler la fonction javascript.

Prateek
la source

1

J'aime cette idée de fonctionnalité dynamique. Je travaille sur l'ajout de fonctions à une base de données dynamique à l'aide de PHP / MySQL et JS; cela fonctionne bien pour ajouter une fonction spécifique à des classes dynamiques spécifiques. Merci!

ejbytes

@codeling pouvez-vous partager les détails du navigateur et de l'environnement?

Prateek

@Prateek Firefox, dernière version. Je n'avais besoin que de la source, j'ai donc travaillé dessus maintenant en passant thiscomme paramètre dans onClick(en fait, n'utilisant pas onClick mais onChange, est-ce peut-être le problème?). J'ai également vérifié un peu et il semble y avoir beaucoup de confusion à propos de cette eventvariable - est-ce un paramètre "implicite" ou doit-il être déclaré explicitement comme argument (c'est function reply_click(event)-à- dire que j'ai également vu dans certains endroits)? Est-il uniquement disponible lors de l'affectation de l'écouteur d'événements via addEventListener...? J'ai joué, mais je n'ai pas pu le faire fonctionner.

codeling le

3

Pour info: l'objet d'événement global est disponible en chrome, pas en firefox.

DaveEdelstein

40

(Je pense que l' idattribut doit commencer par une lettre. Cela pourrait être faux.)

Vous pouvez opter pour une 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 vous oblige à être relativement à l'aise avec le modèle d'événement loufoque.

sdleihssirhc
la source

1

Ça ne marchera pas. Vous avez spécifié du code dans l'attribut onclick qui appelle reply_click sans argument. Ainsi, aucun argument d'événement ne sera transmis à la fonction.

Jason LeBrun

1

Et la valeur de l'attribut "id" peut être n'importe quelle chaîne. Cela ne doit pas commencer par une lettre.

Jason LeBrun

@ Jason En fait, dans tous les bons navigateurs modernes, l' eargument est généré automatiquement. Si ce n'est pas le cas, alors nous devons traiter avec IE6-8, qui fournit à la place cet objet utile via window.event.

sdleihssirhc

@Jason De plus, les identifiants ne peuvent pas commencer par un nombre .

sdleihssirhc

6

@sdleihssirhc En fait, vous arrogant tel ou tel, que tout change avec HTML5 .

sdleihssirhc

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

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>

Geai
la source

14

Comment le faire sans JavaScript en ligne

il est généralement recommandé d'éviter JavaScript en ligne, mais il existe 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 simple onClickattribut.

Navigateurs 2014 uniquement

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

Navigateurs 2013 uniquement

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

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, en cliquant sur les boutons, cela fonctionnera car nous attachons l'événement au document.

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

Vous pouvez toujours remplacer insertHTMLpar document.writesi cela ne vous dérange pas ses inconvénients

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

Sources:

Timo Huovinen
la source

Je me demande toujours comment les événements peuvent être aussi efficaces (en termes de performances) que les onclicks en ligne. Je suppose qu'ils doivent être plus difficiles à suivre?

gabn88

dépend de la convention de dénomination de votre classe, si la convention est significative, elle sera aussi facile à trouver que les onclicks

Timo Huovinen

11

Si vous ne voulez pas passer d'arguments à la fonction onclick, utilisez simplement event.targetpour obtenir l'élément 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);
}

A-Sharabiani
la source

7

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

vérifier sur JsFiddle

codercat
la source

1

Votre code dit: TypeError non capturé: Impossible de définir la propriété «onclick» de non défini

alex351

1

c'est parce que vous n'avez pas de boutons dans votre html

vidstige

6

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

user3262563
la source

Vous pourriez couper le var id=obj;et avoir justealert(obj);

Doge

Je pense que cela devrait être la réponse acceptée, et "(this.id)" a fonctionné pour moi tout à l'heure dans FF, IE et 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)
}

geste
la source

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

3

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;

XYZ
la source

2

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

wayneuk2
la source

1

Je pense que myButtons est un identifiant et que vous l'utilisez comme sélecteur de classe dans jquery avec un point (.) Je pense que cela devrait commencer par #.

shashi verma

0

Cela enregistrera l'identifiant de l'élément sur lequel vous avez cliqué: addFields.

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

<script>

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

</script>

alecbaldwin
la source

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

Réponses:

Comment le faire sans JavaScript en ligne

Navigateurs 2014 uniquement

Navigateurs 2013 uniquement

Cross-browser

Cross-browser avec jQuery