295

Wie finde ich die ID der Schaltfläche, auf die geklickt wird?

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

17

@ Robin van Baalen: IDs sollten nicht gemäß Konvention numerisch sein, können es aber sein.

Williambq

596

Sie müssen die ID als Funktionsparameter senden. Mach es so:

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

Erweitern Sie das Snippet

Dadurch wird die ID gesendet, this.idals clicked_iddie Sie in Ihrer Funktion verwenden können. Sehen Sie es hier in Aktion.

Shamittomar
quelle

2

Ich wollte nur erwähnen, dass dies für alle, die mit JQuery's eine Nullreferenzausnahme erhalten event.target.id(für mich haben sowohl Firefox als auch IE diese ausgelöst), eine großartige Lösung ist, die in allen drei Hauptbrowsern funktioniert.

X3074861X

2

Bruder, du bist die einzige Person im Internet, die es geschafft hat, für mich zu interpretieren, wie das funktioniert. Die Verwendung einer Variablen im Funktionsnamen und die Verwendung einer anderen Variablen im eigentlichen Funktionsskript ergab für mich absolut keinen Sinn! In einem kurzen Satz haben Sie mir erklärt, dass die Variable, die wir in die Funktionsklammern () setzen, und die Variable, die wir für die Funktionsdeklaration verwenden, dasselbe sind, nur AS übergeben! Das ist brilliant ! Vielen Dank, mein Herr, für die Weisheit, die Sie mir verliehen haben

Denislav Karagiozov

Sie wollen eigentlich keinen Code in Ihrem HTML, wie <button onClick = "">

Dave Jacoby

61

Im Allgemeinen ist es einfacher, die Dinge zu organisieren, wenn Sie Ihren Code und Ihr Markup trennen. Definieren Sie alle Ihre Elemente und definieren Sie dann in Ihrem JavaScript-Abschnitt die verschiedenen Aktionen, die für diese Elemente ausgeführt werden sollen.

Wenn ein Ereignishandler aufgerufen wird, wird er im Kontext des Elements aufgerufen, auf das geklickt wurde. Also die Kennung dies wird sich auf das DOM - Element , dass Sie angeklickt. Über diesen Bezeichner können Sie dann auf Attribute des Elements zugreifen.

Beispielsweise:

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

1

Was ist, wenn sich die Schaltflächen in einem Repeater befinden und daher dynamisch generiert werden, sodass Sie nicht wissen, wie viele Schaltflächen Sie haben werden?

Amc_rtty

4

Es gibt eine Reihe von Möglichkeiten, wie Sie damit umgehen können. Generieren Sie beispielsweise das Javascript dynamisch. Oder fügen Sie allen Schaltflächen dieselbe Klasse hinzu, durchlaufen Sie dann alle Schaltflächen mit diesem Klassennamen und hängen Sie den Handler auf diese Weise an.

Jason LeBrun

@JasonLeBrun Ich weiß nicht, wie die ID des Elements lautet, auf das ich klicken werde. Das suche ich. Ein Code zeichnet ein SVG-Element und wenn ich darauf klicke, muss ich wissen, dass es das Attribut "id" ist. Ob und wie kann dieser Code verwendet werden?

Arihant

46

VERWENDUNG VON PURE JAVASCRIPT: Ich weiß, dass es spät ist, aber für die zukünftigen Menschen kann es helfen:

Im HTML-Teil:

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

Im Javascipt Controller:

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

Auf diese Weise müssen wir die 'id' des Elements zum Zeitpunkt des Aufrufs der Javascript-Funktion nicht binden.

Prateek
quelle

1

Ich mag diese Idee für dynamische Funktionalität. Ich arbeite daran, einer dynamischen Datenbank mit PHP / MySQL und JS Funktionen hinzuzufügen. Dies funktioniert gut, um bestimmten dynamischen Klassen eine bestimmte Funktion hinzuzufügen. Vielen Dank!

Ejbytes

@codeling können Sie die Details des Browsers und der Umgebung teilen?

Prateek

@Prateek Firefox, neueste. Ich brauchte nur die Quelle, also habe ich sie jetzt umgangen, indem ich sie thisals Parameter übergeben habe onClick(eigentlich nicht mit onClick, sondern mit onChange, ist das vielleicht das Problem?). Ich habe auch ein bisschen nachgesehen und es scheint viel Verwirrung über diese eventVariable zu geben - ist es ein "impliziter" Parameter oder muss es explizit als Argument angegeben werden (dh function reply_click(event)was ich auch in gesehen habe? einige Standorte)? Ist es nur verfügbar, wenn der Ereignis-Listener über addEventListener... zugewiesen wird? Ich habe herumgespielt, konnte es aber nicht zum Laufen bringen.

Codeling

3

Zu Ihrer Information: Das globale Ereignisobjekt ist in Chrome und nicht in Firefox verfügbar.

DaveEdelstein

40

(Ich denke, die id Attribut muss mit einem Buchstaben beginnen. Könnte falsch sein.)

Sie könnten sich für eine Eventdelegation entscheiden ...

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

... aber dafür müssen Sie sich mit dem verrückten Eventmodell relativ wohl fühlen.

sdleihssirhc
quelle

1

Das wird nicht funktionieren. Sie haben im onclick-Attribut Code angegeben, der reply_click ohne Argumente aufruft. Es wird also kein Ereignisargument an die Funktion übergeben.

Jason LeBrun

1

Der Wert des Attributs "id" kann eine beliebige Zeichenfolge sein. Es muss nicht mit einem Brief beginnen.

Jason LeBrun

@Jason Tatsächlich wird das eArgument in allen guten modernen Browsern automatisch generiert. Wenn dies nicht der Fall ist, müssen wir uns mit IE6-8 befassen, das stattdessen dieses nützliche Objekt über bereitstellt window.event.

sdleihssirhc

@ Jason Außerdem können IDs nicht mit einer Nummer beginnen .

sdleihssirhc

6

@sdleihssirhc Eigentlich arrogant du so und so, dass sich alles mit HTML5 ändert .

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
quelle

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
quelle

14

Wie es ohne Inline-JavaScript geht

Es wird allgemein empfohlen, Inline-JavaScript zu vermeiden, aber es gibt selten ein Beispiel dafür.
Hier ist meine Art, Ereignisse an Schaltflächen anzuhängen.
Ich bin nicht ganz zufrieden damit, wie lange die empfohlene Methode mit einer einfachen Methode verglichen wirdonClick Attribut wird.

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

Nur 2013 Browser

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

Browserübergreifend

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

Browserübergreifend mit 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>

Sie können dies ausführen, bevor das Dokument fertig ist. Wenn Sie auf die Schaltflächen klicken, funktioniert dies, da das Ereignis an das Dokument angehängt wird.

Hier ist eine jsfiddle
Aus irgendeinem seltsamen Grund dieinsertHTML funktioniert Funktion nicht, obwohl sie in allen meinen Browsern funktioniert.

Sie können immer ersetzen insertHTMLmit , document.writewenn Sie nichts dagegen ist es nicht Nachteile

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

Quellen:

Timo Huovinen
quelle

Ich frage mich immer, wie Ereignisse so effizient (leistungsmäßig) sein können wie Inline-Onclicks. Ich denke, es muss schwieriger sein, den Überblick zu behalten.

gabn88

hängt von Ihrer Klassennamenkonvention ab. Wenn die Konvention aussagekräftig ist, ist sie genauso leicht zu finden wie onclicks

Timo Huovinen

11

Wenn Sie der onclick-Funktion keine Argumente übergeben möchten, verwenden Sie einfach event.target, um das angeklickte Element abzurufen :

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

7

Mit reinem Javascript können Sie Folgendes tun:

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

Überprüfen Sie es auf JsFiddle

Codercat
quelle

1

Ihr Code sagt: Uncaught TypeError: Die Eigenschaft 'onclick' von undefined kann nicht festgelegt werden

alex351

1

Das liegt daran, dass Sie keine Schaltflächen in Ihrem HTML haben

vidstige

6

Sie können es einfach so machen:

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

Sie könnten die Var ausschneiden id=obj;und einfach habenalert(obj);

Doge

Ich denke, dies sollte die akzeptierte Antwort sein, und "(this.id)" hat gerade für mich in FF, IE und Chrome funktioniert.

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
quelle

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
quelle

3

Taste 1 Taste 2 Taste 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
quelle

2

Entschuldigung, es ist eine späte Antwort, aber es ist sehr schnell, wenn Sie dies tun: -

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

Dadurch wird die ID aller angeklickten Schaltflächen angezeigt.

Wenn Sie nur den Wert der Schaltfläche erhalten möchten, auf die an einer bestimmten Stelle geklickt wurde, legen Sie sie einfach in einen Container wie

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

und ändern Sie den Code in: -

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

ich hoffe das hilft

wayneuk2
quelle

1

Ich denke, myButtons ist eine ID und Sie verwenden sie als Klassenauswahl in jquery mit einem Punkt (.). Ich denke, dies sollte mit # beginnen.

Shashi Verma

0

Dadurch wird die ID des Elements protokolliert, auf das geklickt wurde: addFields.

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

<script>

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

</script>

Alecbaldwin
quelle

JavaScript - onKlicken Sie, um die ID der angeklickten Schaltfläche abzurufen

Antworten:

Wie es ohne Inline-JavaScript geht

Nur Browser 2014

Nur 2013 Browser

Browserübergreifend

Browserübergreifend mit jQuery