onClick, um die ID der angeklickten Schaltfläche zu erhalten

Question

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

Answer 1

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

Answer 2

Dies ist eine Verbesserung der Prateek Antwort - Ereignis wird per Parameter übergeben, so dass reply_click keine globale Variable verwenden muss (und bisher hat noch keine Stelle diese Variante vorgestellt)

function reply_click(e) {
  console.log(e.target.id);
}

<button id="1" onClick="reply_click(event)">B1</button>
<button id="2" onClick="reply_click(event)">B2</button>
<button id="3" onClick="reply_click(event)">B3</button>

Answer 3

Erster Weg: Triggerelement senden mit this

<button id="btn01" onClick="myFun(this)">B1</button>
<button id="btn02" onClick="myFun(this)">B2</button>
<button id="btn03" onClick="myFun(this)">B3</button>

<script>
  function myFun(trigger_element)
  {
      // Get your element:
      var clicked_element = trigger_element

      alert(clicked_element.id + "Was clicked!!!");
  }
</script>

Auf diese Weise senden Sie ein Objekt des Typs: HTMLElement und Sie erhalten das Element selbst. Sie müssen sich nicht darum kümmern, ob das Element eine id oder eine andere Eigenschaft hat. Und es funktioniert von selbst ganz gut.

---

Zweiter Weg: Senden der Triggerelement-ID mit this.id

<button id="btn01" onClick="myFun(this.id)">B1</button>
<button id="btn02" onClick="myFun(this.id)">B2</button>
<button id="btn03" onClick="myFun(this.id)">B3</button>

<script>
  function myFun(clicked_id)
  {
      // Get your element:
      var clicked_element = document.getElementById(clicked_id)

      alert(clicked_id + "Was clicked!!!");
  }
</script>

Auf diese Weise senden Sie ein Objekt des Typs: String und Sie erhalten NICHT das Element selbst. Vor der Verwendung müssen Sie also sicherstellen, dass Ihr Element bereits eine id hat.

Sie dürfen die Element-ID nicht selbst senden, wie z. B. onClick="myFun(btn02)" . das ist kein CLEAN CODE und Ihr Code verliert dadurch an Funktionalität.

---

in Ihrem Fall:

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

Answer 4

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;

Answer 5

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

});