JavaScript - クリックしたボタンの属性を取得する

この回答は、クリックされたボタンのIDを取得する方法を説明しています。JavaScript - クリックしたボタンの属性を取得する

JavaScript - onClick to get the ID of the clicked button

しかし、あなたはまた、そのボタンの他の属性を得ることができますか？例えば。 nameまたはdata-* attributes？

出典

2016-09-23 Snowcrash

そのボタンの他の属性も取得できますか？あなたがへのアクセスを提供し、イベントデータへのアクセス権を持ってクリックハンドラで

：

イベントを発生させたDOMノード（e.target）
イベントがバインドされたDOMノード（マウスボタンがクリックイベント、イベント・タイプ、など＆hellipのために使用されたようなどのように;）

（ e.currentTarget）

他のすべてのイベント・データにの

DOMノードの参照がtheir attributes

さらにイベントがバインドされたDOMノードとして、このようなデータにアクセスするためのAPIを持つようにコールバック関数の呼び出しコンテキストとしてデフォルトで使用可能です。

document.querySelector('button').addEventListener('click', function() { 
 
    console.log(this); 
 
}, false);

<button type="button">example</button>

あなたは（あなたが避けるべき）HTMLでインラインのイベントハンドラを使用している、this：それは、DOMノードがthis変数に設定されるというのは本当に空想の方法ですあなたが呼び出したいことが任意の関数に渡すことが可能です：

function click(btn) { 
 
    console.log(btn); 
 
}

<button type="button" onclick="window.click(this);">example</button>

0を

出典

2016-09-23 22:24:32 zzzzBov

Working fiddle。

はいすることができます、例えば、getAttribute()を使用して：

element.getAttribute('attribute-name'); //return 'attribute-name' attribute

注：それはあなたが望む属性を取得、現在のクリックされた要素thisのオブジェクトを渡す方が良いでしょう：

をHTML :

<button name="X" data-other-attr='XX' onClick="reply_click(this)">Button</button>

JS :

function reply_click(clicked_object) 
{ 
    alert(clicked_object.getAttribute('name')); 
    alert(clicked_object.getAttribute('data-other-attr')); 
}

この情報がお役に立てば幸いです。

出典

2016-09-23 22:20:14

はい、できます。

は例では、参照先：あなたが this.nameまたは this.datasetで this.idを置き換えることができ、あなたが代わりにIDの reply_click関数にそれらの属性を渡すことになる

<button id="1" onClick="reply_click(this.id)">B1</button>

。

出典

2016-09-23 22:20:58 jered

またはあなたは「この」機能をreply_clickしてから機能へのアクセスの内側にボタンが – flynorc

属性に渡すことができます@flynorcはいそれは私が行うだろうが、私は彼が参照の答えの面で、それを維持したいものです。 – jered

ボタン（button.addEventListener('click')）にクリックハンドラをアタッチし、通常のJavaScriptオブジェクトと同様にドット表記を使用してそのプロパティにアクセスします。

フィドル：https://jsfiddle.net/9vkrwxmx/

出典

2016-09-23 22:26:31

-2

はいすることができます。 jQueryを使って、あなたは要素はあなたがから属性を取得したい要素がある場合、それを得るために $(elment).attr("attribute"); を使用することができ、および属性は少しあなたが指摘例のコードを変更しているあなたは

以下

出典

2016-09-23 22:28:33

jQueryがタグ付けされていないときは、それは偽のパースだと示唆します。バニラJSの詳細も含まれている場合は例外です。 – zzzzBov

を取得したい属性の名前です。質問で

<html> 
<body> 

<form> 

<button id="1" name="test1" onClick="reply_click(1)">B1</button> 
<button id="2" name="test2" onClick="reply_click(2)">B2</button> 
<button id="3" name="test3" onClick="reply_click(3)">B3</button> 

<script> 
    function reply_click(clicked_id) 
    { 
     //alert(clicked_id); 
     var temp = document.getElementById(clicked_id).getAttribute("name"); 
     alert(temp); 
    } 
</script> 

</form> 

</body> 
</html>

出典

2016-09-23 22:45:07 Naidu

JavaScript - クリックしたボタンの属性を取得する

答えて

関連する問題