How to call same method with different Ids

Question

I have html controls of two sets with different ids in my page, when I click a tag I want to call DoSomething method.

<div>
   <a href="javascript:void(0);" onclick="DoSomething();">
   <span id="spnValue" >Value1</span>
</div>

<div>
   <a href="javascript:void(0);" onclick="DoSomething();">
   <span id="spnValue1">Value2</span>
</div>

function DoSomething() {
   var htmlVal = "";
   skuList  = $("span[id*='spnValue']").html();
}

But whichever one I click it gives the Value1 in htmlVal. How can I distinguish and retrieve the value of method called

score 5 · Accepted Answer · answered Sep 22 '15 at 06:35

5

You can pass clicked element object to method:

<a href="javascript:void(0);" onclick="DoSomething(this);">
<span id="spnValue1">Value2</span>
</div>

and then use it for traversing to child span element:

function DoSomething(obj) {
  var htmlVal = "";
  skuList  = $(obj).find('span').html();
}

Working Demo

answered Sep 22 '15 at 06:35

Milind Anantwar

81,290
25
94
125

What if they are all in one div abd `a` tag closed before span. Eg. [link]http://jsfiddle.net/7qh3deb5/1/ – ha chitti Sep 22 '15 at 09:51
What if span is in multiples divs, `next` is giving undefined – ha chitti Sep 22 '15 at 11:15
@hachitti: off course.traversing will break. share that markup – Milind Anantwar Sep 22 '15 at 11:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/90322/discussion-between-ha-chitti-and-milind-anantwar). – ha chitti Sep 22 '15 at 12:09

score 1 · Answer 2 · answered Sep 22 '15 at 06:37

1

<div>
       <a href="javascript:void(0);" onclick="DoSomething(this);">
      <span id="spnValue1">Value2</span>
</div>

function DoSomething(obj) {
    var htmlVal = "";
    skuList  = $(obj).parent().find('span').html();
}

answered Sep 22 '15 at 06:37

Muhammad Usman

1,366
5
18
33

score 0 · Answer 3 · answered Sep 22 '15 at 06:35

You can pass the current element in the function using that you can locate the span element which is a children on the a tag

<div>
  <a href="javascript:void(0);" onclick="DoSomething(this);">
     <span id="spnValue" >Value1</span>
  </a>
</div>

<div>
  <a href="javascript:void(0);" onclick="DoSomething(this);">
     <span id="spnValue1">Value2</span>
  </a>
</div>

function DoSomething(node) {
   var htmlVal = "";
   skuList  = $(node).find('span').html();//for children
   //skuList  = $(node).next('span').html();//for siblings
}

How to call same method with different Ids

3 Answers3