onclick関数が呼び出される要素を取得する

Question

私は、関数test()を指しているonclick属性を持つボタンを持っています。

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

機能テスト（）：

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

がどのように私はクリックされたボタンについての情報を得ることができますか？例： どうすればhtmlを読むことができますか？

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

Answer 1

つのオプションを関数に渡す必要があります。

1. パスthisを関数に。

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

   この引数を関数で使用します。

2. ハンドラーをaddEventListenerまたはjQueryのonでフックし、ハンドラー内でthisを使用します。

   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のバージョン：

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

3. は、これらのボタンはであるコンテナ上の単一のハンドラをフックアップし、クリックされたかを決定するイベントオブジェクトのtargetプロパティを使用します（ただし、注意していればbutton内の他の要素を使用する場合は、最初にbuttonにループする必要があります）。

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

   あなたのためbutton内のネストされた要素の可能性を扱うjQueryのバージョン：

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

Answer 2

関数へthis参照を渡し、そのノードのテキストコンテンツは、textContentプロパティを読み出します。

HTML

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

スクリプト

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

Fiddle

Answer 3

\t function test(button) 
 
\t { 
 
\t  var button_name = button.getAttribute('name'); 
 
\t  console.log("Im button "+ button_name); 
 
\t }

\t <button onclick="test(this)" name="button1">Button 1</button> 
 
\t <button onclick="test(this)" name="button2">Button 2</button> 
 
\t <button onclick="test(this)" name="button3">Button 3</button>

Answer 4

Jqueryを使用する場合は、関数内で$（this）オブジェクトを呼び出すことができます。

Answer 5

あなたは "これは"

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

<script> 
    function test(t) 
    { 
     console.log(t); 
    } 
</script> 

Answer 6

ここではjqueryのを使用して、あなたのソリューションjsfiddleです。

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

Answer 7

だけで各ボタンにIDを追加し、テスト関数に

を渡し、ここworking jsfiddle

<button onclick="test(this.id)" id="button1">1</button> 
<button onclick="test(this.id)" id="button2">2</button> 
<button onclick="test(this.id)" id="button3">3</button> 

<script> 
    function test(id) 
    { 
     var button_name = id; 
     alert("Im button name is : "+ button_name); 
     console.log("Im button name is :"+ button_name); 
    } 
</script> 

です