JavaScript - onClick untuk mendapatkan ID dari tombol yang diklik

295

Bagaimana cara menemukan id tombol yang sedang diklik?

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

function reply_click()
{
}
javascript  html 
— Bin Chen
sumber
17
@Robin van Baalen: ID harus tidak numerik per konvensi, tetapi mereka bisa.
— williambq

Jawaban:

596

Anda perlu mengirim ID sebagai parameter fungsi. Lakukan seperti ini:

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

Ini akan mengirimkan ID this.idsebagai clicked_idmana Anda dapat menggunakan fungsi Anda. Lihat beraksi di sini.

— shamittomar
sumber
2
Saya hanya ingin mencatat, bagi siapa saja yang mendapatkan pengecualian referensi nol menggunakan JQuery event.target.id(bagi saya, baik Firefox dan IE melemparkannya), ini adalah solusi hebat yang bekerja di ketiga browser utama.
— X3074861X
2
Saudaraku, Anda adalah satu-satunya orang di internet yang berhasil mengartikan bagi saya cara kerjanya. Menggunakan variabel dalam nama fungsi dan daripada menggunakan yang lain dalam skrip fungsi sebenarnya sama sekali tidak masuk akal bagi saya! Dalam satu kalimat singkat Anda menjelaskan kepada saya bahwa variabel yang kita masukkan dalam tanda kurung fungsi () dan yang kita gunakan pada deklarasi fungsi adalah hal yang sama, baru saja diteruskan ke AS! Ini brilian! Terima kasih tuanku atas kebijaksanaan yang telah Anda berikan kepada saya
— Denislav Karagiozov
Anda tidak benar-benar menginginkan kode dalam html Anda, seperti <tombol onClick = "">
— Dave Jacoby
61

Secara umum, banyak hal lebih mudah untuk tetap teratur jika Anda memisahkan kode dan markup Anda. Tentukan semua elemen Anda, dan kemudian di bagian JavaScript Anda, tentukan berbagai tindakan yang harus dilakukan pada elemen tersebut.

Ketika event handler dipanggil, itu disebut dalam konteks elemen yang diklik. Jadi, pengidentifikasi ini akan merujuk ke elemen DOM yang Anda klik. Anda kemudian dapat mengakses atribut elemen melalui pengenal itu.

Sebagai contoh:

<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>
— Jason LeBrun
sumber
1
bagaimana jika tombol-tombol berada dalam repeater dan karenanya dihasilkan secara dinamis, jadi Anda tidak tahu berapa banyak tombol yang akan Anda miliki?
— Amc_rtty
4
Ada beberapa cara Anda bisa mengatasinya. Misalnya, hasilkan javascript secara dinamis. Atau, tambahkan kelas yang sama ke semua tombol, lalu iterate melalui semua tombol dengan nama kelas itu dan pasang pawang seperti itu.
— Jason LeBrun
@JasonLeBrun Saya tidak tahu apa id elemen yang akan saya klik. Itu yang saya cari. Kode menggambar elemen SVG dan ketika saya mengkliknya, saya perlu tahu itu atribut "id". Jika dan bagaimana kode ini dapat digunakan?
— Arihant
46

MENGGUNAKAN JAVASCRIPT MURNI: Saya tahu ini sudah terlambat tetapi mungkin untuk orang-orang masa depan dapat membantu:

Di bagian HTML:

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

Di Javascipt Controller:

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

Dengan cara ini kita tidak perlu mengikat 'id' Elemen pada saat memanggil fungsi javascript.

— Prateek
sumber
1
Saya suka ide ini untuk fungsionalitas dinamis. Saya sedang mengerjakan penambahan fungsi ke DB dinamis menggunakan PHP / MySQL dan JS; ini bekerja dengan baik untuk menambahkan fungsi spesifik ke kelas dinamis tertentu. Terima kasih!
— ejbytes
@codeling, bisakah Anda membagikan detail peramban dan lingkungan?
— Prateek
@Prateek Firefox, terbaru. Saya hanya membutuhkan sumbernya, jadi saya mengatasinya sekarang dengan mengirimkan thissebagai parameter onClick(sebenarnya, tidak menggunakan onClick tetapi onChange, apakah itu mungkin masalahnya?). Saya juga telah memeriksa sekitar sedikit dan tampaknya ada banyak kebingungan tentang eventvariabel ini terjadi - apakah itu parameter "implisit" atau apakah itu harus dinyatakan secara eksplisit sebagai argumen (yaitu function reply_click(event), yang saya juga lihat di beberapa lokasi)? Apakah hanya tersedia saat menetapkan pendengar acara melalui addEventListener...? Saya sudah bermain-main, tetapi tidak bisa membuatnya bekerja.
— pemrograman
3
FYI: Objek acara global tersedia dalam chrome, bukan firefox.
— DaveEdelstein
40

(Saya pikir id atribut perlu dimulai dengan surat. Mungkin salah.)

Anda bisa mengikuti delegasi acara ...

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

... tapi itu mengharuskan Anda untuk relatif nyaman dengan model acara yang aneh.

— sdleihssirhc
sumber
1
Ini tidak akan berhasil. Anda telah menentukan kode pada atribut onclick yang memanggil reply_click tanpa argumen. Jadi, tidak ada argumen acara yang akan diteruskan ke fungsi.
— Jason LeBrun
1
Dan nilai atribut "id" bisa berupa string apa saja. Itu tidak harus dimulai dengan surat.
— Jason LeBrun
@Jason Sebenarnya, di semua browser modern yang bagus, eargumen dibuat secara otomatis. Jika tidak, maka kita harus berurusan dengan IE6-8, yang sebaliknya menyediakan objek yang bermanfaat melalui window.event.
— sdleihssirhc
— sdleihssirhc
6
@sdleihssirhc Sebenarnya, Anda sombong begitu-dan-begitu, bahwa semua berubah dengan HTML5 .
— sdleihssirhc
28 
<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;
}
— Mohanraj
sumber
18 
<button id="1" class="clickMe"></button>
<button id="2" class="clickMe"></button>
<button id="3" class="clickMe"></button>

<script>
$('.clickMe').click(function(){
    alert(this.id);
});
</script>
— Jay
sumber
14

Cara melakukannya tanpa JavaScript sebaris

umumnya disarankan untuk menghindari inline JavaScript, tetapi jarang ada contoh bagaimana melakukannya.
Inilah cara saya melampirkan acara ke tombol.
Saya tidak sepenuhnya senang dengan berapa lama metode yang direkomendasikan dibandingkan dengan yang sederhanaonClick atribut .

Browser 2014 saja

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

Browser 2013 saja

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

Lintas browser

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

Peramban silang dengan jQuery

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

Anda dapat menjalankan ini sebelum dokumen siap, mengklik tombol akan berfungsi karena kami melampirkan acara ke dokumen.

Berikut adalah jsfiddle
Untuk beberapa alasan anehinsertHTML fungsi ini tidak berfungsi walaupun berfungsi di semua browser saya.

Anda selalu dapat mengganti insertHTMLdengan document.writejika Anda tidak keberatan itu kekurangannya

<script>
document.write('<button class="click-me" id="btn1">Button 1</button>');
</script>

Sumber:

— Timo Huovinen
sumber
Saya selalu bertanya-tanya bagaimana acara dapat seefisien (kinerja-bijaksana) seperti onclick inline. Saya kira mereka pasti lebih sulit untuk dilacak?
— gabn88
tergantung pada konvensi penamaan kelas Anda, jika konvensi itu bermakna maka akan mudah ditemukan seperti onclicks
— Timo Huovinen
11

Jika Anda tidak ingin meneruskan argumen apa pun ke fungsi onclick, cukup gunakan event.targetuntuk mendapatkan elemen yang diklik:

<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);
}
— A-Sharabiani
sumber
7

Dengan javascript murni Anda dapat melakukan hal berikut:

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

periksa Di JsFiddle

— codercat
sumber
1
Kode Anda mengatakan: Uncaught TypeError: Tidak dapat menetapkan properti 'onclick' dari undefined
— alex351
1
itu karena Anda tidak memiliki tombol di html Anda
— vidstige
6

Anda bisa melakukannya dengan cara ini: 

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

— pengguna3262563
sumber
Anda bisa memotong var id=obj;dan hanya memilikialert(obj);
— Doge
Saya pikir ini harus menjadi jawaban yang diterima, dan "(this.id)" bekerja untuk saya sekarang di FF, IE, dan Chrome.
— Jon Coombs
6 
<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)
}
— gest
sumber
4 
 <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;

});
— tilak
sumber
3

Tombol 1 Tombol 2 Tombol 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;
— XYZ
sumber
2

Maaf ini jawaban yang terlambat tetapi sangat cepat jika Anda melakukan ini: -

$(document).ready(function() {
  $('button').on('click', function() {
     alert (this.id);
  });
});

Ini mendapatkan ID dari tombol apa saja yang diklik.

Jika Anda hanya ingin mendapatkan nilai dari tombol yang diklik di tempat tertentu, cukup masukkan dalam wadah seperti 

<div id = "myButtons"> buttons here </div>

dan ubah kode menjadi: -

 $(document).ready(function() {
      $('.myButtons button').on('click', function() {
         alert (this.id);
      });
    });

saya harap ini membantu

— wayneuk2
sumber
1
Saya pikir myButtons adalah id dan Anda menggunakannya sebagai pemilih kelas di jquery dengan titik (.) Saya pikir ini harus dimulai dengan #.
— shashi verma
0

Ini akan mencatat id elemen yang telah diklik: addFields.

<button id="addFields" onclick="addFields()">+</button>

<script>

function addFields(){ 
    console.log(event.toElement.id)
}

</script>
— alecbaldwin
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.