[RESOLVED] get id of <input type='button'> onclick

[vb2java]

Hello,

I have multiple buttons as follows:

<input type='button' id='Q01Clear' name='Q01Clear' value='Clear' onclick='ClearQ();' />

The id's increment (ie: Q01Clear, Q02Clear, etc. etc...), and the onclick calls the same function.

I now have this:

function ClearQ()
{
var docButtons=document.getElementsByTagName('input')
for (var i=0; i<docButtons.length; i++){ if (docButtons[i].type == 'button'){ alert(docButtons[i].id) }
}

Ok, so this will alert to me the id's of all the "<input>" tags of type 'button'. How then, can I alert only the id of the button that is clicked?

[Padonak]

<input type='button' id='Q01Clear' name='Q01Clear' value='Clear' onclick='alert(this.id);' />

[vb2java]

Thanks Padonak!

Ok, but when I tried to do the same thing by calling the funciton from an external js file like so:

onclick='ClearQ();' />

function ClearQ() { alert (this.id) }

... it returns 'undefined' as the id ???

Is there a way to get funciton ClearQ() {}, to alert the id of the button that is clicked?

[007Julien]

// With this HTML line (this is the DOM input object and this.id is id)
<input type='button' id='Q01Clear' name='Q01Clear' value='Clear' onclick='ClearQ(this.id);' />

// use this function (clikedId is the argument of the function it takes different values according to the different calls)
function ClearQ(clikedId){
   alert(clikedId);
}

// Or with this line (event is an objet which is create with the click)
<input type='button' id='Q01Clear' name='Q01Clear' value='Clear' onclick='ClearQ(event);' />

// use this function to display the target of the click
function ClearQ(e){
   //e is the event which can take different forms with the browser
  // we take e.target if is form exits otherwise we take e.srcElement
   var target=e.target?e.target:e.srcElement;
   alert(target.id);
   // or alert(target.name);alert(target.value);alert(target.type)
}

[vb2java]

Thanks, 007Julien!

My stuff is working.
Oh yeah ...

[Padonak]

Also you can show these id's right in the page instead of using alerts - this is much handy because every alert stops the script untill you click OK. For this purpose you must add the appropriate element in the page markup, for example:

<div id="my_results"></div>

JS

function ClearQ(e){
   //e is the event which can take different forms with the browser
  // we take e.target if is form exits otherwise we take e.srcElement
   var target=e.target?e.target:e.srcElement;
   document.getElementById('my_results').innerHTML=target.id;
   // or alert(target.name);alert(target.value);alert(target.type)
}