295

จะหารหัสของปุ่มที่ถูกคลิกได้อย่างไร

<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

— ถังเฉิน
แหล่งที่มา

17

@Robin van Baalen: ID ไม่ควรเป็นตัวเลขต่อการประชุม แต่สามารถเป็นได้

— williambq

596

คุณต้องส่ง 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ที่คุณสามารถใช้ในการทำงานของคุณ ดูการทำงานจริงได้ที่นี่

— shamittomar
แหล่งที่มา

2

ฉันแค่อยากจะทราบว่าสำหรับทุกคนที่ได้รับข้อยกเว้นการอ้างอิงเป็นโมฆะโดยใช้ JQuery event.target.id(สำหรับฉันทั้ง Firefox และ IE กำลังขว้างมัน) นี่เป็นทางออกที่ยอดเยี่ยมที่ใช้งานได้กับเบราว์เซอร์หลักทั้งสาม

— X3074861X

2

พี่ชายคุณเป็นคนเดียวบนอินเทอร์เน็ตที่จัดการตีความให้ฉันในแบบที่มันใช้ได้ การใช้ตัวแปรในชื่อฟังก์ชั่นและมากกว่าการใช้ตัวแปรอื่นในฟังก์ชั่นสคริปต์ที่เกิดขึ้นจริงทำให้ฉันไม่มีเหตุผล! ในประโยคสั้น ๆ หนึ่งคุณอธิบายให้ฉันฟังว่าตัวแปรที่เราใส่ไว้ในวงเล็บฟังก์ชั่น () และอีกหนึ่งประโยคที่เราใช้ในการประกาศฟังก์ชั่นเป็นสิ่งเดียวกันเพิ่งผ่าน AS! มันยอดเยี่ยมมาก! ขอบคุณพระเจ้าสำหรับปรีชาญาณที่คุณมอบให้แก่ฉัน

— เดนิสลาฟ Karagiozov

คุณไม่ต้องการรหัสใด ๆ ใน html ของคุณเช่น <button onClick = "">

— Dave Jacoby

61

โดยทั่วไปสิ่งต่างๆจะง่ายต่อการจัดระเบียบหากคุณแยกรหัสและมาร์กอัปของคุณ กำหนดองค์ประกอบทั้งหมดของคุณจากนั้นในส่วน 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>

— Jason LeBrun
แหล่งที่มา

1

เกิดอะไรขึ้นถ้าปุ่มอยู่ใน repeater และสร้างแบบไดนามิกดังนั้นคุณไม่ทราบว่าคุณจะมีกี่ปุ่ม?

— Amc_rtty

4

มีหลายวิธีที่คุณสามารถจัดการได้ ตัวอย่างเช่นสร้างจาวาสคริปต์แบบไดนามิก หรือเพิ่มคลาสเดียวกันให้กับปุ่มทั้งหมดแล้ววนซ้ำทุกปุ่มด้วยชื่อคลาสนั้นและแนบ handler ด้วยวิธีดังกล่าว

— Jason LeBrun

@ JasonLeBrun ฉันไม่รู้ว่า id ขององค์ประกอบที่ฉันจะคลิกคืออะไร นั่นคือสิ่งที่ฉันกำลังมองหา รหัสดึงองค์ประกอบ SVG และเมื่อฉันคลิกที่มันฉันจำเป็นต้องรู้ว่ามันเป็น "id" คุณลักษณะ รหัสนี้สามารถใช้ได้อย่างไรและอย่างไร?

— Arihant

46

ใช้ 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);
}

วิธีนี้เราไม่ต้องผูก 'id' ขององค์ประกอบในขณะที่เรียกใช้ฟังก์ชันจาวาสคริปต์

— Prateek
แหล่งที่มา

1

ฉันชอบแนวคิดนี้สำหรับฟังก์ชั่นแบบไดนามิก ฉันกำลังเพิ่มฟังก์ชั่นให้กับฐานข้อมูลไดนามิกโดยใช้ PHP / MySQL และ JS; มันทำงานได้ดีสำหรับการเพิ่มฟังก์ชันเฉพาะให้กับคลาสแบบไดนามิกที่เฉพาะเจาะจง ขอบคุณ!

— ejbytes

@codeling คุณสามารถแชร์รายละเอียดของเบราว์เซอร์และสภาพแวดล้อมได้หรือไม่

— Prateek

@Prateek Firefox เวอร์ชันล่าสุด ฉันต้องการแหล่งที่มาเท่านั้นดังนั้นตอนนี้ฉันจึงแก้ไขมันโดยส่งผ่านthisพารามิเตอร์เป็นonClick( ในความเป็นจริงไม่ได้ใช้ onClick แต่ onChange นั่นอาจเป็นปัญหาหรือไม่) ฉันได้ตรวจสอบประมาณเล็กน้อยและดูเหมือนว่าจะมีความสับสนมากเกี่ยวกับeventตัวแปรนี้ที่เกิดขึ้น - เป็นพารามิเตอร์ "โดยนัย" หรือต้องระบุอย่างชัดเจนว่าเป็นอาร์กิวเมนต์ (เช่นfunction reply_click(event)ที่ฉันเคยเห็นด้วยใน บางแห่ง) จะใช้ได้เฉพาะเมื่อมอบหมายผู้ฟังเหตุการณ์ผ่านaddEventListener... ฉันเล่นไปรอบ ๆ แต่ไม่สามารถทำงานได้

— codeling

3

FYI: วัตถุเหตุการณ์ส่วนกลางพร้อมใช้งานในโครเมี่ยมไม่ใช่ firefox

— DaveEdelstein

40

(ฉันคิดว่า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);
    }
}

... แต่นั่นต้องให้คุณรู้สึกสบายใจกับโมเดลเหตุการณ์ที่แปลกประหลาด

— sdleihssirhc
แหล่งที่มา

1

สิ่งนี้ใช้ไม่ได้ คุณได้ระบุรหัสในแอตทริบิวต์ onclick ที่เรียกว่า reply_click โดยไม่มีข้อโต้แย้ง ดังนั้นจะไม่มีการส่งผ่านอาร์กิวเมนต์ของเหตุการณ์ไปยังฟังก์ชัน

— Jason LeBrun

1

และค่าของแอตทริบิวต์ "id" สามารถเป็นสตริงใดก็ได้ ไม่ต้องเริ่มด้วยตัวอักษร

— Jason LeBrun

@Jason จริง ๆ แล้วในเบราว์เซอร์สมัยใหม่ที่ดีทั้งหมดeอาร์กิวเมนต์จะถูกสร้างขึ้นโดยอัตโนมัติ ถ้ามันไม่ได้แล้วเราจะต้องจัดการกับ IE6-8 window.eventซึ่งแทนที่จะแสดงให้เห็นว่าวัตถุที่มีประโยชน์ผ่านทาง

— sdleihssirhc

@ Jason นอกจากนี้รหัสไม่สามารถเริ่มต้นด้วยตัวเลขได้

— sdleihssirhc

6

@sdleihssirhc ที่จริงแล้วคุณหยิ่งดังนั้นและเพื่อให้การเปลี่ยนแปลงทั้งหมดที่มี 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
แหล่งที่มา

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>

— คนโง่
แหล่งที่มา

14

วิธีการทำโดยไม่ใช้ JavaScript แบบอินไลน์

โดยทั่วไปจะแนะนำให้หลีกเลี่ยง JavaScript แบบอินไลน์ แต่ไม่ค่อยมีตัวอย่างของวิธีการทำ
นี่คือวิธีการแนบกิจกรรมกับปุ่มของฉัน
ฉันไม่พอใจอย่างสิ้นเชิงกับวิธีการที่แนะนำนานกว่าเมื่อเทียบกับonClickแอตทริบิวต์ แบบง่าย

เบราว์เซอร์ 2014 เท่านั้น

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

เบราว์เซอร์ 2013 เท่านั้น

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

ข้ามเบราว์เซอร์ด้วย 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>

คุณสามารถเรียกใช้สิ่งนี้ก่อนที่เอกสารจะพร้อมคลิกที่ปุ่มจะใช้งานได้เพราะเราแนบกิจกรรมเข้ากับเอกสาร

นี่คือjsfiddle
ด้วยเหตุผลแปลก ๆinsertHTMLฟังก์ชั่นนี้ใช้ไม่ได้ถึงแม้ว่ามันจะทำงานได้ในทุกเบราว์เซอร์ของฉัน

คุณสามารถแทนที่insertHTMLด้วยdocument.writeหากคุณไม่คำนึงถึงข้อเสียเปรียบ

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

แหล่งที่มา:

— ติโม Huovinen
แหล่งที่มา

ฉันมักจะสงสัยว่าเหตุการณ์จะมีประสิทธิภาพ (ประสิทธิภาพที่ชาญฉลาด) เช่นเดียวกับ inclicks แบบอินไลน์ได้อย่างไร ฉันเดาว่าพวกเขาจะต้องลำบากกว่านี้ในการติดตาม?

— gabn88

ขึ้นอยู่กับแบบแผนการตั้งชื่อชั้นเรียนของคุณถ้าการประชุมมีความหมายแล้วมันจะหาได้ง่ายเหมือน onclicks

— Timo Huovinen

11

หากคุณไม่ต้องการส่งอาร์กิวเมนต์ใด ๆ ไปยังฟังก์ชัน 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);
}

— A-Sharabiani
แหล่งที่มา

7

ด้วยจาวาสคริปต์ที่บริสุทธิ์คุณสามารถทำสิ่งต่อไปนี้:

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

ตรวจสอบบนJsFiddle

— codercat
แหล่งที่มา

1

รหัสของคุณพูดว่า: Uncaught TypeError: ไม่สามารถตั้งค่าคุณสมบัติ 'onclick' ของไม่ได้กำหนด

— alex351

1

นั่นเป็นเพราะคุณไม่มีปุ่มใน html ของคุณ

— vidstige

6

คุณสามารถทำได้ด้วยวิธีนี้:

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

— user3262563
แหล่งที่มา

คุณสามารถลดความแปรปรวนid=obj;และเพียงแค่มีalert(obj);

— Doge

ฉันคิดว่านี่น่าจะเป็นคำตอบที่ได้รับการยอมรับและ "(this.id)" นี้เหมาะกับฉันตอนนี้ใน FF, IE และ 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
แหล่งที่มา

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;

});

— ลัก
แหล่งที่มา

3

ปุ่ม 1 ปุ่ม 2 ปุ่ม 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
แหล่งที่มา

2

ขออภัยเป็นคำตอบที่ช้า แต่จริง ๆ ถ้าคุณทำอย่างนี้: -

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

ฉันหวังว่านี่จะช่วยได้

— wayneuk2
แหล่งที่มา

1

ฉันคิดว่า myButtons เป็นรหัสและคุณใช้มันเป็นตัวเลือกคลาสใน jquery ด้วยจุด (.) ฉันคิดว่านี่ควรเริ่มต้นด้วย #

— shashi verma

0

นี่จะบันทึกรหัสขององค์ประกอบที่คลิก: addFields

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

<script>

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

</script>

— อเล็กบอลด์วิน
แหล่งที่มา

JavaScript - onClick เพื่อรับ ID ของปุ่มที่คลิก

วิธีการทำโดยไม่ใช้ JavaScript แบบอินไลน์

เบราว์เซอร์ 2014 เท่านั้น

เบราว์เซอร์ 2013 เท่านั้น

เบราว์เซอร์

ข้ามเบราว์เซอร์ด้วย jQuery