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

Как найти идентификатор кнопки, которая нажата?

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

function reply_click()
{
}

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

В целом, все проще организовать, если вы отделите свой код и свою разметку. Определите все свои элементы, а затем в своем разделе JavaScript определите различные действия, которые должны выполняться над этими элементами.

Когда вызывается обработчик событий, он вызывается в контексте элемента, на который был нажат. Таким образом, идентификатор this будет ссылаться на элемент 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>

Ответ 3

(Я думаю, что атрибут 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);
    }
}

... но это требует, чтобы вы были относительно комфортно с дурацкой моделью событий.

Ответ 4

ИСПОЛЬЗОВАНИЕ ЧИСТОГО 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.

Ответ 5

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

Ответ 6

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

Ответ 7

Как это сделать без встроенного 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 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>

Источники:

Ответ 8

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

Ответ 9

Вы можете просто сделать это следующим образом:

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

Ответ 10

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

Ответ 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);
}

Ответ 12

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

});

Ответ 13

Кнопка 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;

Ответ 14

Извините за свой поздний ответ, но это очень быстро, если вы это сделаете: -

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

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

Ответ 15

/* When the user clicks on the button,
toggle between hiding and showing the myDropdown content */
function myDropdownFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {

  var input, filter, ul, li, a, i;
  input = document.getElementById("myDropdownButton");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

var countries, text, cLen, i;
countries = ["AMERICA", "INDIA", "AUSTRALIA", "EUROPE"];
cLen = countries.length;

text = "";
for (i = 0; i < cLen; i++) {
  var country=countries[i] ;
  text += "<a id="+country+" onclick='test("+country+")'>"+ country +"</a>";
}
//text += "</ul>";


alert("text --> "+text);

document.getElementById("demo").innerHTML = text;


function test(v){
myDropdownFunction();
alert("Need Selected(onClick) Country Value --< "+v);
}
.myDropdownButton {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.myDropdownButton:hover, .myDropdownButton:focus {
  background-color: #3e8e41;
}

#myDropdownButton {
  border-box: box-sizing;
  <!--background-image: url('searchicon.png'); -->
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myDropdownButton:focus {outline: 3px solid #ddd;}

.myDropdown {
  position: relative;
  display: inline-block;
}

.myDropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

.myDropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.myDropdown a:hover {background-color: #ddd;}

.show {display: block;}
<h2>Search/Filter myDropdown</h2>
<p>Click on the button to open the myDropdown menu, and use the input field to search for a specific myDropdown link.</p>

<div class="myDropdown">
  <button onclick="myDropdownFunction()" class="myDropdownButton">Search Address</button>
  <div id="myDropdown" class="myDropdown-content">
    <input type="text" placeholder="Search.." id="myDropdownButton" onkeyup="filterFunction()">
     <p id="demo"></p>
	</input>
  </div>
</div>