回答:
IDを関数パラメーターとして送信する必要があります。次のようにします。
<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>これは、ID送信されますthis.idようclicked_id、あなたの関数内で使用することができたが。実際の動作はこちらでご覧ください。
event.target.id（私にとっては、FirefoxとIEの両方がスローしていた）にとって、これは3つの主要ブラウザすべてで機能する優れたソリューションです。
一般的に、コードとマークアップを分離すると、物事を整理しやすくなります。すべての要素を定義してから、JavaScriptセクションで、それらの要素に対して実行する必要があるさまざまなアクションを定義します。
イベントハンドラーが呼び出されると、クリックされた要素のコンテキスト内で呼び出されます。つまり、これはクリックしたDOM要素を参照する識別子です。その後、その識別子を介して要素の属性にアクセスできます。
例えば：
<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>PURE JAVASCRIPTの使用：遅いことは知っていますが、将来の人々にとっては役立つ可能性があります。
HTML部分：
<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>Javasciptコントローラー：
function reply_click()
{
alert(event.srcElement.id);
}これにより、javascript関数を呼び出すときにElementの「id」をバインドする必要がなくなります。
this、パラメーターとして渡すことで回避しましたonClick（実際には、onClickではなくonChangeを使用していますが、それが問題かもしれません）。私も少し調べてみましたが、このevent変数の周りに混乱がたくさんあるようです-それは「暗黙の」パラメーターですか、それとも引数として明示的に指定する必要がありますか（つまりfunction reply_click(event)、一部の場所）？addEventListener... を介してイベントリスナーを割り当てるときにのみ使用できますか？私は遊んでみましたが、動作させることができませんでした。
（id属性は文字で始まる必要があると思います。間違っている可能性があります。）
イベントの委任に行くことができます...
<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);
}
}...しかし、そのためには奇抜なイベントモデルに比較的慣れている必要があります。
e引数は自動的に生成されます。そうでない場合は、IE6-8を処理する必要があります。IE6-8は、代わりにを介してその有用なオブジェクトを提供しますwindow.event。
インラインJavaScriptを回避することをお勧めしますが、その方法の例はほとんどありません。
イベントをボタンに添付する私の方法は次のとおりです。
推奨される方法が単純なonClick属性と比較してどれほど長いかについて、私は完全に満足していません。
<button class="btn">Button</button>
<script>
let OnEvent = (doc) => {
return {
on: (event, className, callback) => {
doc.addEventListener('click', (event)=>{
if(!event.target.classList.contains(className)) return;
callback.call(event.target, event);
}, false);
}
}
};
OnEvent(document).on('click', 'btn', function (e) {
window.console.log(this, e);
});
</script><!DOCTYPE html>
<html>
<head>
<script>
(function(doc){
var hasClass = function(el,className) {
return el.classList.contains(className);
}
doc.addEventListener('click', function(e){
if(hasClass(e.target, 'click-me')){
e.preventDefault();
doSomething.call(e.target, e);
}
});
})(document);
function insertHTML(str){
var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
lastScript.insertAdjacentHTML("beforebegin", str);
}
function doSomething(event){
console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>
<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script>
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>
<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">
<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
var cb_addEventListener = function(obj, evt, fnc) {
// W3C model
if (obj.addEventListener) {
obj.addEventListener(evt, fnc, false);
return true;
}
// Microsoft model
else if (obj.attachEvent) {
return obj.attachEvent('on' + evt, fnc);
}
// Browser don't support W3C or MSFT model, go on with traditional
else {
evt = 'on'+evt;
if(typeof obj[evt] === 'function'){
// Object already has a function on traditional
// Let's wrap it with our own function inside another function
fnc = (function(f1,f2){
return function(){
f1.apply(this,arguments);
f2.apply(this,arguments);
}
})(obj[evt], fnc);
}
obj[evt] = fnc;
return true;
}
return false;
};
var hasClass = function(el,className) {
return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
}
cb_addEventListener(doc, 'click', function(e){
if(hasClass(e.target, 'click-me')){
e.preventDefault ? e.preventDefault() : e.returnValue = false;
doSomething.call(e.target, e);
}
});
})(document);
function insertHTML(str){
var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
lastScript.insertAdjacentHTML("beforebegin", str);
}
function doSomething(event){
console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>
<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script type="text/javascript">
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>
<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">
<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function($){
$(document).on('click', '.click-me', function(e){
doSomething.call(this, e);
});
})(jQuery);
function insertHTML(str){
var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
lastScript.insertAdjacentHTML("beforebegin", str);
}
function doSomething(event){
console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>
<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script type="text/javascript">
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>
<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">
<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>
</body>
</html>ドキュメントの準備が整う前にこれを実行できます。イベントをドキュメントに添付するため、ボタンをクリックしても機能します。
これはjsfiddleです
。いくつかの奇妙な理由によりinsertHTML、すべてのブラウザーで機能しているにもかかわらず、関数が機能しません。
あなたがそれが欠点であることを気にinsertHTMLしdocument.writeなければ、いつでも置き換えることができます
<script>
document.write('<button class="click-me" id="btn1">Button 1</button>');
</script>出典：
onclick関数に引数を渡したくない場合は、次のように使用event.targetしてクリックされた要素を取得します。
<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>
function reply_click()
{
// event.target is the element that is clicked (button in this case).
console.log(event.target.id);
}純粋なJavaScriptを使用すると、次のことができます。
var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i < buttonsCount; i += 1) {
buttons[i].onclick = function(e) {
alert(this.id);
};
}あなたは単にこのようにそれを行うことができます：
<input type="button" id="1234" onclick="showId(this.id)" value="click me to show my id"/>
<script type="text/javascript">
function showId(obj) {
var id=obj;
alert(id);
}id=obj;ただ持っていてもよいalert(obj);
申し訳ありませんが遅い答えですが、これを行うと本当に速いです：-
$(document).ready(function() {
$('button').on('click', function() {
alert (this.id);
});
});クリックされたボタンのIDを取得します。
特定の場所でクリックされたボタンの値だけを取得したい場合は、次のようにコンテナに配置します
<div id = "myButtons"> buttons here </div>コードを次のように変更します。
$(document).ready(function() {
$('.myButtons button').on('click', function() {
alert (this.id);
});
});これが役に立てば幸い
これにより、クリックされた要素のidが記録されます：addFields。
<button id="addFields" onclick="addFields()">+</button>
<script>
function addFields(){
console.log(event.toElement.id)
}
</script>