Which object in control array was clicked?

Don't forget, the array index starts at 0, so the first box will return 0, the second 1 and so forth.

Fritz the Blank

Try this:


<script>
function chkBox_onclick(theCaller)
{
 //What is the value or index of the control array that was clicked?
 alert(theCaller.value)
}
</script>
....

<input type=checkbox name=chkBox id=chkBox value=1 onclick="return chkBox_onclick(this)">
<input type=checkbox name=chkBox id=chkBox value=2 onclick="return chkBox_onclick(this)">
<input type=checkbox name=chkBox id=chkBox value=3 onclick="return chkBox_onclick(this)">

You could also use srcElement. I've never used it personally but have seen it used. I think you just need to call window.event.srcElement or just event.srcElement to get its name.

Yeap!!!

<script>
function chkBox_onclick(theCaller)
{
 //What is the value or index of the control array that was clicked?
 alert(theCaller.value)
 alert(event.srcElement.value)
}
</script>
....

<input type=checkbox name=chkBox id=chkBox value=1 onclick="return chkBox_onclick(this)">
<input type=checkbox name=chkBox id=chkBox value=2 onclick="return chkBox_onclick(this)">
<input type=checkbox name=chkBox id=chkBox value=3 onclick="return chkBox_onclick(this)">

simplest way:   using variable "this"

keep in mind that variable "this" is the object fire the event.

function chkBox_onclick()
{
   //  variable "this" is the object(checkbox) who trigger the event
   alert(this.value);
}

....

<input type=checkbox name=chkBox id=chkBox value=1 onclick="return chkBox_onclick()">
<input type=checkbox name=chkBox id=chkBox value=2 onclick="return chkBox_onclick()">
<input type=checkbox name=chkBox id=chkBox value=3 onclick="return chkBox_onclick()">

"this" is not true :-)

Perfect.  this.name is what I was looking for.  Thanks.

Jolhid

Hey Z-man, check out:

https://www.experts-exchange.com/questions/20559318/Points-for-ZVonko.html

Fritz the Blank

Glad to have helped,

Fritz the Blank

Yeah, I guess he did more exactly answer the question, Fritz.  But yours was first and the fact you showed that 'this' can be used as a parameter is what I really wanted to know.  <g>

Thanks to both of you.

Jolhid

Yeah, I guess he did more exactly answer the question, Fritz.  But yours was first and the fact you showed that 'this' can be used as a parameter is what I really wanted to know.  <g>

Thanks to both of you.

Jolhid

You are welcome :-)

See you,
Zvonko

This is true: :-)

you have two choice:

1. pass "this" as a parameter to event handler function

or

2. simply use "this" variable inside handler function, like this:

function chkBox_onclick()
{
  //  variable "this" is the object(checkbox) who trigger the event
  alert(this.value);
}

PLEASE BE NOTICED that:
In normal function, "this" referes to javascript object himself (like "me" in vb).
While in event handler, "this" refers to the DOM object who triggered the event.

James

Hello James,

it is good that JavaScript rules can not be voted in democratic manner :-)

Simply test your code in a browser and tell me what you see.

This is Experts Exchange and so I am thankful for any knowledge exchange. Perhaps I am wrong, but I have tested your proposal. So please test you too. If you can confirm it then I will offer 300 points to you, ok!

So long,
Zvonko

PS: and I want to see it in IE5.5 <|:-)

Hello Zvonko,

This is the code for you to test. It works both in IE 6 and IE 5.

James

<input id=id1 type=text value="Click here to test--Text"><br>
<input id=id2 type=button value="Click here to test--Button"><br>
<input id=id3 type="Checkbox" value="1">Check Box<br>
<input id=id4 type="Radio" value="1">Radio 1
<input id=id4 type="Radio" value="2">Radio 2<br>
<a id=id5 value="value of link" href="javascript:">Link</a>

<script>
function TestClick()
{
    alert("Name: "+this.id + "\nValue:" +this.value);
}

id1.onclick=TestClick
id2.onclick=TestClick
id3.onclick=TestClick
id4[0].onclick=TestClick
id4[1].onclick=TestClick
id5.onclick=TestClick

</script>

another example:

<input name=id1 id=id1 type=text value="Click here to test--Text"><br>
<input name=id2 id=id2 type=button value="Click here to test--Button"><br>
<input name=id3 id=id3 type="Checkbox" value="1">Check Box<br>
<input name=id4 id=id4 type="Radio" value="1">Radio 1
<input name=id4 id=id4 type="Radio" value="2">Radio 2<br>
<a id=id5 value="value of link" href="javascript:">Link</a><br>
<select id="id6" name="id6">
     <option >0</option>
     <option >1</option>
     <option >2</option>
</select><br>
<select id="id7" name="id7" multiple>
     <option value=0>0</option>
     <option value=1>1</option>
     <option value=2>2</option>
</select><br>


<script>
function TestClick()
{
    var msg = "Id: "+this.id + "\nName: "+this.name + "\nValue:" +this.value + "\n";
    if (this.type=="checkbox" || this.type=="radio")
         msg += "checked:"+this.checked + "\n";
    if (typeof(this.selectedIndex) != "undefined")
         msg += "selecteIndex:"+this.selectedIndex + "\n";
    alert(msg);
}


id1.onclick=TestClick
id2.onclick=TestClick
id3.onclick=TestClick
id4[0].onclick=TestClick
id4[1].onclick=TestClick
id5.onclick=TestClick
id6.onchange=TestClick
id7.onchange=TestClick

</script>

Hey James, now I saw it, you are right! :)

this 300 points absolutely yours.

I was testing only inline onClick assignment trough html.
Now you showed to me that JavaScript assignment of onclick yields the this object assignment. I was pretty sure this is only Netscape property.

Thanks,
Zvonko

I have been following this last thread with some interest, but I think that I will remain an old fuddy-duddy and actually pass the object as a parameter literally. I think that it makes the code easier to read and I won't stay awake at nights wondering what happens under Opera 1.x.

It's always good to learn something new, however.


Fritz the Blank

I see it the same, learning all aspects.

Hello James, please take this points offer:
https://www.experts-exchange.com/questions/20562029/points-for-expert-jamesyu.html

fritz_the_blank,

What I want to say is that it is not difficult to understand. It's normal and reasonable.
Now, let me told you what's going on.

As you see, the following code works(I mean "this" inside function TestClick refers to id1):
<input name=id1 id=id1 type=text value="Click here to test--Text">
.....
id1.onclick=TestClick

But, this will not work:
<input name=id1 id=id1 type=text value="Click here to test--Text" onclick="TestClick()">


Why? Let's look at a simple sample first.

function f1()
{
    alert(this.v1);
}

function obj(){
    this.v1 = "value of obj";
    this.showValue = f1
}

var a = new obj();
a.showValue();    // <--  what value should be shown? "value of obj"

actually,
this.showValue = f1  makes f1 becomes obj's member, and named as showvalue, so variable "this" inside f1 refers to instance of obj.

You can do "this.showValue = f1" inside function obj(as show above), it will affect ALL instance of obj.

Another way, you can assign(add or replace) object member for a specific instance of object. Try the following:

//we create a new function f2

function f2()
{
    alert(this.v1);
}

var a = new obj();
//and we add a new member to instance a
a.showvalue2 = f2;
a.showValue2();    // <--  what value should be shown? "value of obj"

var b = new obj();
// how about b?
b.showValue2();  // <-- this will yield an error, says showValue2 not defined

Now, I think you already know:
What "id1.onclick=TestClick" does? Samething. :-)


Hold on one second, why the following doesn't work?
<input name=id1 id=id1 type=text value="Click here to test--Text" onclick="TestClick()">

Because the onclick="TestClick()" is a string. It does not add member to object id1. What it acutally does is do an eval(onclick). Inside the string of code(onclick string), "this" refers to the object id1. But, when it goes into function you called, "this" refers the function.

Interesting? or Cool? What do you guys think?

Have fun.

James

James very good

Hmm. Definitely cool AND interesting. Thanks for showing me something new! :)