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

Lesezeit: 3 Minuten

Benutzer-Avatar
Schwarz

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/

Benutzer-Avatar
Satpal

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

  • Exzellent! Und Sie brauchen die Variable nicht einmal, wenn Sie sie nur 1 oder 2 Mal brauchen: alert(event.target.textContent) reicht. Wäre schön zu wissen, seit wann diese direkte Lösung unterstützt wird.

    – miwk

    26. Januar um 22:19 Uhr

	function test(button)
	{
	    var button_name = button.getAttribute('name');
	    console.log("Im button "+ button_name);
	}
	<button onclick="test(this)" name="button1">Button 1</button>
	<button onclick="test(this)" name="button2">Button 2</button>
	<button onclick="test(this)" name="button3">Button 3</button>

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

Benutzer-Avatar
Pascha K

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>

Benutzer-Avatar
Mihai Alexandru-Ionut

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>

1011610cookie-checkHolen Sie sich das Element, von dem die Onclick-Funktion aufgerufen wird

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy