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

@ Робин ван Баален: Идентификаторы не должны быть числовыми в соответствии с соглашением, но они могут быть.

Уильямбк

596

Вам необходимо отправить идентификатор в качестве параметров функции. Делай это так:

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

Развернуть фрагмент

Это будет посылать идентификатор this.idв clicked_idкоторый вы можете использовать в вашей функции. Смотрите это в действии здесь.

shamittomar
источник

2

Я просто хотел отметить, что для тех, кто получает исключение нулевой ссылки с использованием JQuery event.target.id(для меня это делали и Firefox, и IE), это отличное решение, которое работает во всех трех основных браузерах.

X3074861X

2

Брат, ты единственный человек в интернете, который сумел объяснить мне, как это работает. Использование переменной в имени функции и использование другой в реальном скрипте функции не имело для меня никакого смысла! В одном коротком предложении вы объяснили мне, что переменная, которую мы помещаем в скобки функции (), и переменная, которую мы используем в объявлении функции, - это одно и то же, только что переданные в AS! Это великолепно! Спасибо, мой господин, за ту мудрость, которую ты мне даровал

Денислав Карагиозов

Вы действительно не хотите, чтобы какой-либо код в вашем html, например, <button onClick = "">

Дейв Джейкоби,

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>

Джейсон Лебрун
источник

1

Что делать, если кнопки находятся в повторителе и, следовательно, генерируются динамически, поэтому вы не знаете, сколько у вас будет кнопок?

Amc_rtty

4

Есть несколько способов справиться с этим. Например, генерировать JavaScript динамически. Или добавьте один и тот же класс ко всем кнопкам, а затем переберите все кнопки с этим именем класса и таким образом прикрепите обработчик.

Джейсон Лебрун

@JasonLeBrun Я не знаю, каков идентификатор элемента, на который я собираюсь нажать. Это то, что я ищу. Код рисует элемент SVG, и когда я щелкаю по нему, мне нужно знать, что это атрибут «id». Если и как можно использовать этот код?

Арихант

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» элемента во время вызова функции javascript.

Prateek
источник

1

Мне нравится эта идея для динамической функциональности. Я работаю над добавлением функций в динамическую БД с использованием PHP / MySQL и JS; это хорошо работает для добавления определенной функции к определенным динамическим классам. Спасибо!

ejbytes

@codeling Можете ли вы поделиться информацией о браузере и среде?

Prateek

@Prateek Firefox, последний. Мне нужен был только источник, поэтому я обошел его сейчас, передав в thisкачестве параметра onClick(на самом деле, не используя onClick, а onChange, разве в этом проблема?). Я также немного проверил, и кажется, что эта eventпеременная часто путается - это «неявный» параметр или его нужно явно указывать в качестве аргумента (то есть function reply_click(event), который я также видел в некоторые места)? Доступно ли это только при назначении прослушивателя событий через addEventListener...? Я играл, но не мог заставить его работать.

кодирование

3

К вашему сведению: объект глобального события доступен в Chrome, а не в 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 без аргументов. Таким образом, аргумент события не будет передан функции.

Джейсон Лебрун

1

А значением атрибута "id" может быть любая строка. Это не должно начинаться с буквы.

Джейсон Лебрун

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

Источники:

Тимо Хуовинен
источник

Мне всегда интересно, как события могут быть такими же эффективными (с точки зрения производительности), как встроенные клики. Я думаю, что они должны быть сложнее отслеживать?

gabn88

зависит от вашего соглашения об именах классов, если соглашение имеет смысл, то его будет так же легко найти, как и кликов

Timo Huovinen

11

Если вы не хотите передавать какие-либо аргументы в функцию onclick, просто используйте, event.targetчтобы получить элемент clicked:

<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

С чистым 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);
    };
}

проверить это на 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.

Джон Кумбс

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

гест
источник

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

Получает идентификатор любой нажатой кнопки.

Если вы хотите просто получить значение нажатия кнопки в определенном месте, просто поместите их в контейнер как

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

и измените код на: -

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

надеюсь, это поможет

wayneuk2
источник

1

Я думаю, что myButtons - это идентификатор, и вы используете его как селектор класса в jquery с точкой (.) Я думаю, что это должно начинаться с #.

Шаши Верма

0

Это будет регистрировать идентификатор элемента, по которому щелкнули: addFields.

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

<script>

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

</script>

Болдуин
источник

JavaScript - onClick, чтобы получить идентификатор нажатой кнопки

Ответы:

Как это сделать без встроенного JavaScript

Только браузеры 2014

Только браузеры 2013

Кросс-браузер

Кросс-браузер с JQuery