295

Jak znaleźć identyfikator klikniętego przycisku?

<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
źródło

17

@Robin van Baalen: Identyfikatory nie powinny być numeryczne według konwencji, ale mogą być.

williambq

596

Musisz wysłać identyfikator jako parametry funkcji. Zrób to tak:

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

Rozwiń fragment kodu

Spowoduje to wysłanie identyfikator this.idjako clicked_idktóre można wykorzystać w swojej funkcji. Zobacz to w akcji tutaj.

shamittomar
źródło

2

Chciałem tylko zauważyć, że dla każdego, kto korzysta z wyjątku odniesienia zerowego za pomocą JQuery event.target.id(dla mnie zarówno Firefox, jak i IE go rzucały), jest to świetne rozwiązanie, które działa we wszystkich trzech głównych przeglądarkach.

X3074861X,

2

Bracie, jesteś jedyną osobą w Internecie, której udało mi się zinterpretować sposób, w jaki to działa. Używanie zmiennej w nazwie funkcji i używanie innej w rzeczywistym skrypcie funkcji nie miało dla mnie żadnego sensu! W jednym krótkim zdaniu wyjaśniłeś mi, że zmienna, którą umieściliśmy w nawiasach funkcyjnych () i ta, której używamy w deklaracji funkcji, to to samo, właśnie przekazane AS! To jest genialne ! Dziękuję, mój panie, za mądrość, którą mi obdarzyłeś

Denislav Karagiozov

Tak naprawdę nie chcesz żadnego kodu w swoim html, jak <przycisk onClick = "">

Dave Jacoby

61

Ogólnie rzecz biorąc, łatwiej jest utrzymać porządek, jeśli oddzielisz kod i znaczniki. Zdefiniuj wszystkie elementy, a następnie w sekcji JavaScript określ różne działania, które powinny zostać wykonane na tych elementach.

Gdy wywoływany jest moduł obsługi zdarzeń, jest on wywoływany w kontekście klikniętego elementu. Tak, identyfikator ten będzie odnosić się do elementu DOM, który kliknął. Następnie można uzyskać dostęp do atrybutów elementu za pośrednictwem tego identyfikatora.

Na przykład:

<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
źródło

1

co jeśli przyciski są w repeaterze i dlatego są generowane dynamicznie, więc nie wiesz, ile przycisków będziesz miał?

Amc_rtty

4

Istnieje kilka sposobów, aby sobie z tym poradzić. Na przykład, generuj javascript dynamicznie. Lub dodaj tę samą klasę do wszystkich przycisków, a następnie iteruj wszystkie przyciski z tą nazwą klasy i dołącz w ten sposób moduł obsługi.

Jason LeBrun,

@JasonLeBrun Nie wiem jaki jest identyfikator elementu, który kliknę. Właśnie tego szukam. Kod rysuje element SVG, a kiedy go klikam, muszę wiedzieć, że jest to atrybut „id”. Jeśli i jak można użyć tego kodu?

Arihant

46

KORZYSTANIE Z PURE JAVASCRIPT: Wiem, że jest późno, ale może być dla przyszłych osób, które mogą pomóc:

W części HTML:

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

W kontrolerze JavaScript:

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

W ten sposób nie musimy wiązać „id” elementu podczas wywoływania funkcji javascript.

Prateek
źródło

1

Podoba mi się ten pomysł na dynamiczną funkcjonalność. Pracuję nad dodawaniem funkcji do dynamicznej bazy danych za pomocą PHP / MySQL i JS; działa to dobrze w przypadku dodawania określonej funkcji do określonych klas dynamicznych. Dzięki!

ejbytes

@ kodowanie, czy możesz udostępnić szczegóły przeglądarki i środowiska?

Prateek

@Prateek Firefox, najnowszy. Potrzebowałem tylko źródła, więc obejrzałem je teraz, przekazując thisjako parametr onClick(właściwie nie używając onClick, ale onChange, czy to może być problem?). Sprawdziłem też trochę i wydaje się, że istnieje wiele zamieszania wokół tej eventzmiennej - czy jest to parametr „niejawny”, czy też musi to być wyraźnie określone jako argument (tzn. function reply_click(event)Które widziałem również w niektóre lokalizacje)? Czy jest dostępny tylko przy przypisywaniu nasłuchiwania zdarzeń przez addEventListener...? Bawiłem się, ale nie mogłem go uruchomić.

kodowanie

3

FYI: Globalny obiekt zdarzenia jest dostępny w chrome, a nie Firefox.

DaveEdelstein,

40

(Myślę, że idatrybut musi zaczynać się od litery. Może być niepoprawny).

Możesz udać się na delegację wydarzenia ...

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

... ale to wymaga relatywnej wygody w przypadku zwariowanego modelu eventu.

sdleihssirhc
źródło

1

To nie zadziała. Podałeś kod w atrybucie onclick, który wywołuje odpowiedź_klucz bez argumentów. Zatem do funkcji nie zostanie przekazany żaden argument zdarzenia.

Jason LeBrun

1

A wartość atrybutu „id” może być dowolnym ciągiem. Nie musi zaczynać się od litery.

Jason LeBrun

@Jason Właściwie we wszystkich dobrych nowoczesnych przeglądarkach eargument jest generowany automatycznie. Jeśli nie jest, musimy mieć do czynienia z IE6-8, który zamiast tego zapewnia ten użyteczny obiekt za pośrednictwem window.event.

sdleihssirhc

@Jason Ponadto identyfikatory nie mogą zaczynać się od cyfry .

sdleihssirhc

6

@sdleihssirhc W rzeczywistości jesteś arogancki tak i tak, że wszystko zmienia się w 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
źródło

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>

Sójka
źródło

14

Jak to zrobić bez wbudowanego JavaScript

generalnie zaleca się unikanie wbudowanego JavaScript, ale rzadko istnieje przykład jak to zrobić.
Oto mój sposób dołączania zdarzeń do przycisków.
Nie jestem do końca zadowolony, jak długo zalecana metoda jest porównywana z prostym onClickatrybutem.

Tylko przeglądarki 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>

Tylko przeglądarki z 2013 r

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

Przeglądarka

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

Przeglądarka z 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>

Możesz uruchomić to zanim dokument będzie gotowy, kliknięcie przycisków będzie działać, ponieważ dołączamy zdarzenie do dokumentu.

Oto jsfiddle
Z jakiegoś dziwnego powodu insertHTMLfunkcja w nim nie działa, chociaż działa we wszystkich moich przeglądarkach.

Zawsze można wymienić insertHTMLze document.writejeśli nie przeszkadza, że to wady

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

Źródła:

Timo Huovinen
źródło

Zawsze zastanawiam się, jak zdarzenia mogą być tak wydajne (pod względem wydajności) jak wbudowane kliknięcia. Sądzę, że trudniej je śledzić?

gabn88

zależy od twojej konwencji nazewnictwa klas, jeśli konwencja jest sensowna, to będzie tak łatwa do znalezienia jak kliknięcia

Timo Huovinen

11

Jeśli nie chcesz przekazywać żadnych argumentów do funkcji onclick, po prostu użyj, event.targetaby uzyskać kliknięty element:

<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
źródło

7

W czystym javascript możesz wykonać następujące czynności:

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

sprawdź na JsFiddle

codercat
źródło

1

Twój kod mówi: Uncaught TypeError: Nie można ustawić właściwości „onclick” niezdefiniowanej

alex351,

1

to dlatego, że nie masz przycisków w html

vidstige

6

Możesz to po prostu zrobić w ten sposób:

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

użytkownik3262563
źródło

Możesz wyciąć var id=obj;i po prostu miećalert(obj);

Doge

Myślę, że to powinna być zaakceptowana odpowiedź, a „(this.id)” działało dla mnie właśnie w FF, IE i 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
źródło

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
źródło

3

Przycisk 1 Przycisk 2 Przycisk 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
źródło

2

Przepraszam, że to późna odpowiedź, ale jest naprawdę szybka, jeśli to zrobisz: -

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

Pobiera identyfikator dowolnego klikniętego przycisku.

Jeśli chcesz tylko kliknąć wartość przycisku w określonym miejscu, po prostu umieść je w pojemniku jak

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

i zmień kod na: -

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

mam nadzieję, że to pomoże

wayneuk2
źródło

1

Myślę, że myButtons to identyfikator, a ty używasz go jako selektora klasy w jquery z kropką (.) Myślę, że powinien zaczynać się od #.

shashi verma

0

Spowoduje to zarejestrowanie identyfikatora klikniętego elementu: addFields.

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

<script>

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

</script>

alecbaldwin
źródło

JavaScript - onClick, aby uzyskać identyfikator klikniętego przycisku

Odpowiedzi:

Jak to zrobić bez wbudowanego JavaScript

Tylko przeglądarki 2014

Tylko przeglądarki z 2013 r

Przeglądarka

Przeglądarka z jQuery