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

Sie müssen die ID als Funktionsparameter senden. Gehen Sie wie folgt vor:

<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 gesendet this.id als clicked_id die Sie in Ihrer Funktion verwenden können. Sehen Sie es hier in Aktion.

Answer 2

MIT REINEM JAVASCRIPT: Ich weiß, es ist spät, aber vielleicht für die Zukunft 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>

In der Javascipt-Steuerung:

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

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

Answer 3

Im Allgemeinen ist es einfacher, die Dinge zu organisieren, wenn Sie Ihren Code und Ihr Markup trennen. Definieren Sie alle Ihre Elemente, und legen Sie dann in Ihrem JavaScript-Abschnitt die verschiedenen Aktionen fest, die mit diesen Elementen durchgeführt werden sollen.

Wenn ein Event-Handler aufgerufen wird, wird er im Kontext des Elements aufgerufen, auf das geklickt wurde. Also, der Bezeichner este verweist 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>

Answer 4

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

Sie könnten sich für die Delegation von Veranstaltungen 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 das setzt voraus, dass Sie sich mit dem verrückten Ereignismodell relativ gut auskennen.

Answer 5

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