it-swarm.com.de

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

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

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>

Dadurch wird die ID this.id als clicked_id gesendet, die Sie in Ihrer Funktion verwenden können. Hier in Aktion sehen.

470
shamittomar

In der Regel lassen sich Dinge einfacher organisieren, wenn Sie Code und Markup voneinander 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. Der Bezeichner this verweist also auf das DOM-Element, auf das Sie geklickt haben. Sie können dann über diesen Bezeichner auf die Attribute des Elements zugreifen.

Zum Beispiel:

<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

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

Sie könnten für Eventdelegation gehen ...

<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 Sie müssen sich mit dem verrückten Ereignismodell relativ gut auskennen.

34
sdleihssirhc

PURE JAVASCRIPT VERWENDEN: Ich weiß, es ist spät, aber für zukünftige 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 beim Aufruf der Javascript-Funktion nicht die 'ID' des Elements binden.

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

So geht es ohne Inline-JavaScript

es wird generell empfohlen, Inline-JavaScript zu vermeiden, aber es gibt nur selten ein Beispiel dafür.
Hier können Sie Events an Schaltflächen anhängen.
Ich bin nicht ganz zufrieden damit, wie viel länger die empfohlene Methode im Vergleich zu einem einfachen onClick-Attribut ist. 

Nur moderne Browser

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

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. Klicken Sie auf die Schaltflächen, da das Ereignis an das Dokument angehängt wird.

Hier ist ein jsfiddle
Aus irgendeinem merkwürdigen Grund funktioniert die Funktion insertHTML nicht, obwohl sie in allen meinen Browsern funktioniert.

Sie können insertHTML immer durch document.write ersetzen, wenn Sie nichts dagegen haben, dass/ Nachteile

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

Quellen:

11
Timo Huovinen

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

check it On JsFiddle

6
codercat

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

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

Wenn Sie keine Argumente an die onclick-Funktion ü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);
}
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

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

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

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

Dadurch wird die ID einer beliebigen Schaltfläche angeklickt.

Wenn Sie möchten, dass der Wert der Schaltfläche an einer bestimmten Stelle angeklickt wird, legen Sie sie einfach in einen Container 

<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

0
wayneuk2