javascript - How to get id of the clicked element when all of the elements have the same class name? - Stack Overflow

admin管理员组

文章数量:1416050

My code would be like this

<select id="id_1" class="editable-input" name="name_1">

<select id="id_2" class="editable-input" name="name_2">

<select id="id_3" class="editable-input" name="name_3">

How do I know which one is being clicked and how to get the id and name of the clicked element?

PS: I want to write the code in javascript later, because I am gonna put that code to GTM variable

My code would be like this

<select id="id_1" class="editable-input" name="name_1">

<select id="id_2" class="editable-input" name="name_2">

<select id="id_3" class="editable-input" name="name_3">

How do I know which one is being clicked and how to get the id and name of the clicked element?

PS: I want to write the code in javascript later, because I am gonna put that code to GTM variable

• javascript

Share Improve this question Follow edited Aug 12, 2015 at 5:15 nnnnnn 150k3030 gold badges209209 silver badges247247 bronze badges asked Aug 12, 2015 at 5:01 IreneIrene 2311 silver badge44 bronze badges 1

• Hi Irene, if yo are new to StackOverflow, if you find the answer helpful. You can mark the check beside the answer to help researchers on determining good solutions. You can also pay back guys that answers by ticking the up icon (upvote) on top of the answer score. – Allan Chua Commented Aug 12, 2015 at 5:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

With Plain JS + html update:

var info = function(dd) {
  alert(dd.id + ", " + dd.name);
};

<select id="id_1" class="editable-input" name="name_1" onclick="info(this);"></select>
<select id="id_2" class="editable-input" name="name_2" onclick="info(this);"></select>
<select id="id_3" class="editable-input" name="name_3" onclick="info(this);"></select>

With Plain JS:

var info = function(dd) {
  return function() {
    alert(dd.id + ", " + dd.name);
  }
};

var dds = document.getElementsByClassName("editable-input");
for (var i = 0, l = dds.length; l > i; i++)
  dds[i].onclick = info(dds[i]);

<select id="id_1" class="editable-input" name="name_1"></select>
<select id="id_2" class="editable-input" name="name_2"></select>
<select id="id_3" class="editable-input" name="name_3"></select>

With jQuery:

$(function() {
  $('select.editable-input').on('click', function(e) {
    alert(this.id + ", " + this.name);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="id_1" class="editable-input" name="name_1"></select>
<select id="id_2" class="editable-input" name="name_2"></select>
<select id="id_3" class="editable-input" name="name_3"></select>

If you are using jQuery, you can use the following:

 $(".editable-input").on("click", function(e) {
    var sender = $(this);

    console.log(sender.prop("id"));
    //OR
    console.log(this.id);
 });

if you are using JavaScript:

 var items = document.getElementsByClassName("example"),
     currentItem;

 for(var i = items.length; i--;) {
   currentItem = items[i];
   currentItem.onclick = function(e) {
      console.log(this.id);
   };
 }

There are some ways of doing that, but the best way of doing it, is by delegating one single event to the parent of your children.

var div = document.getElementById("parent");
div.addEventListener("click", function(e) {
  var el = e.target;
  // here you can get el.id and el.name and do whatever you want
  if (el.tagName.toLowerCase() === "select")
    alert(el.id);
});

<div id="parent">
  <select id="id_1" class="editable-input" name="name_1"></select>
  <select id="id_2" class="editable-input" name="name_2"></select>
  <select id="id_3" class="editable-input" name="name_3"></select>
</div>

Doing that, you create only one event that could handle all the children you have inside the div. So, you'll use less memory, and even if you create another <select> dinamically, it would already have the event delegated to it.

Know more about event delegation.

---

And if you don't like that approach, you can always use the conventional one:

var sels = document.querySelecorAll(".editable-content");
for (var i = 0; i < sels.length; i++) {
  sels[i].addEventListener("click", function(e) {
    var el = e.target;
    // here you can get el.id and el.name and do whatever you want
  });
}

本文标签：