Holen Sie sich das Element, von dem die Onclick-Funktion aufgerufen wird

Ich habe eine Schaltfläche mit einem Onclick-Attribut, das auf die Funktion zeigt test().

<button onclick="test()">Button 1</button>
<button onclick="test()">Button 2</button>
<button onclick="test()">Button 3</button>

Funktionstest():

function test()
{
    var button_name = this.html;
    console.log("Im button "+ button_name);
}

Wie erhalte ich Informationen über die angeklickte Schaltfläche? zB Wie kann ich das HTML lesen?

jsfiddle: https://jsfiddle.net/c2sc9j9e/

Übergeben Sie die this Verweis auf die Funktion, dann lesen textContent Eigenschaft der Textinhalt des Knotens.

HTML

<button onclick="test(this)">Button 1</button>

Skript

function test(clickedElement){
   var button_name = clickedElement.textContent;
}

Geige

Vier Optionen:

1. Passieren this in die Funktion.

   <button onclick="test(this)">Button 1</button>
   

   und dann dieses Argument in der Funktion verwenden.

2. Schließen Sie die Handler an addEventListener oder jQuerys onund dann verwenden this innerhalb des Handlers.

   var buttons = document.querySelectorAll("selector-for-the-buttons");
   Array.prototype.forEach.call(buttons, function(btn) {
       btn.addEventListener("click", handler, false);
   });
   function handler() {
       // Use `this` here
   }
   

   jQuery-Version:

   $("selector-for-the-buttons").on("click", function() {
       // Use `this` here
   });
   

3. Verbinden Sie einen einzelnen Handler mit einem Container, in dem sich diese Schaltflächen befinden, und verwenden Sie die target -Eigenschaft des Ereignisobjekts, um festzustellen, auf was geklickt wurde (beachten Sie jedoch, dass Sie bei Verwendung anderer Elemente darin buttonmüssen Sie eine Schleife bis zum erstellen button Erste).

   document.querySelector("selector-for-the-container").addEventListener("click", function(e) {
       // Use `e.target` here
   }, false);
   

   jQuery-Version, die die Möglichkeit verschachtelter Elemente innerhalb der button für dich:

   $("selector-for-the-container").on("click", "button", function() {
       // Use `this` here (note this is different from the DOM version above)
   });
   

Ich bin auf eine andere extrem einfache Möglichkeit gestoßen, dies in Vanilla JS zu tun, also poste ich sie hier als Referenz:

function whoami () {
  var caller = event.target;
  alert("I'm " + caller.textContent);
}

<button onclick="whoami()">Button 1</button>
<button onclick="whoami()">Button 2</button>
<button onclick="whoami()">Button 3</button>

Ich bin mir nicht sicher über die Browserunterstützung dafür, aber es funktioniert zumindest auf Safari-, Firefox- und Blink-basierten Browsern.

Wenn Sie Jquery verwenden möchten, können Sie das Objekt $(this) in der Funktion aufrufen.

Sie müssen “this” übergeben, um zu funktionieren

<button onclick="test(this)">1</button>
<button onclick="test(this)">2</button>
<button onclick="test(this)">3</button>

<script>
    function test
    {
        console.log
    }
</script>

Hier ist Ihre Lösung jsfiddle mit jquery.

<button onclick="test(this)">1</button>
<button onclick="test(this)">2</button>
<button onclick="test(this)">3</button>

<script>
   function test(button)
   {
       var button_name = $(button).html();
       alert("Im button "+ button_name);
   }
</script>