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

Question

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

Answer 1

Vous devez envoyer l'ID comme paramètres de la fonction. Faites-le 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>

Cela enverra l'ID this.id como clicked_id que vous pouvez utiliser dans votre fonction. Voyez-le en action ici.

Answer 2

En général, il est plus facile d'organiser les choses 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 qui doivent être exécutées sur ces éléments.

Lorsqu'un gestionnaire d'événement est appelé, il l'est dans le contexte de l'élément sur lequel on a cliqué. Ainsi, l'identifiant este fera référence à l'élément du DOM sur lequel vous avez cliqué. Vous pouvez alors accéder aux attributs de l'élément par le biais de 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>`

Answer 3

(Je pense que le id L'attribut doit commencer par une lettre. C'est peut-être une erreur).

Vous pourriez opter pour la délégation d'événements...

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

Answer 4

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

Answer 5

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