how to get id of dynamically created element

[jaschulz]

I create several input elements like using this function (with a different iID argument each time):

function createResponseItem(iID) {

var newInput = document.createElement('input');
newInput.setAttribute('id','response-' + iID);
newInput.setAttribute('type','radio');
newInput.setAttribute('onclick','responseClick(event)');
myDiv.appendChild(newInput);

}

and this works fine, but if I click on one of these inputs, and then, in the responseClick(event) function, I try to query the id of the input in question, like this:

function responseClick(evt) {
alert(evt.target.id);
}

What my alert shows is:

response-function toString() { [native code] }

but that's no use in identifying which of the (dynamically created) inputs I clicked on.

What am I doing wrong here?

JAS

 

[tsuji]

[1] If you prefer setting event handler in a format similar to setting an attribute (which is not) and need passing arguments, you can do this.
>newInput.setAttribute('onclick','responseClick(event)');
[tt]newInput.onclick=function(event) {responseClick(event));[/tt]

[2] The handler in its present suggests that you're testing on moz only. If you want to test it on ie, you need a separate approach.
[tt]
function responseClick(evt) {
if (window.event) {
alert(window.event.srcElement.id);
} else {
alert(evt.target.id);
}
}
[/tt]

 

[jaschulz]

tsuji,

I see the point about setting the event handler (and about my limited responseClick() function), but changing the way newInput is created doesn't solve my problem because the alert in responseClick still produces the useless message I described in my original post. What I need is something that will get me the id of the dynamically created element in question.

Any other suggestions?

JAS

 

[tsuji]

I think [1] does make a difference. Do you find it not?!

 

[jaschulz]

Yes, I tested it, and it produced the same message in the alert as previously.

JAS

 

[tsuji]

Then it is your loop. I have run a quick test as well. It makes a difference. But if the newInput is not setup proper, I can't help.

 

[BillyRayPreachersSon]

Which browser are you testing in? Did you try both points 1 & 2 of tsuji's post together?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jaschulz]

I am using FF2, and this is what I now have:

function createResponseItem(iID,iText) {
var cDiv = document.getElementById('contentDiv');
var newInput = document.createElement('input');
var newSpan = document.createElement('span');
var newSpanText = document.createTextNode(' ' + iText);
var newBreak = document.createElement('br');
newInput.setAttribute('id','response-' + iID);
newInput.setAttribute('type','radio');
newInput.setAttribute('name','response');
newInput.setAttribute('class','response');
//newInput.setAttribute('onclick','responseClick(event)');
newInput.onclick = function(event) { responseClick(event) };
cDiv.appendChild(newInput);
cDiv.appendChild(newSpan);
newSpan.setAttribute('id','responseText-' + iID);
newSpan.appendChild(newSpanText);
cDiv.appendChild(newBreak);
}

which is called from this loop:

for (var i = 1; i < thisItem.length ; i++) {
iStr = i.toString;
createResponseItem(iStr, thisItem); }

and the mouse click function now looks like this:

function responseClick(evt) {
if (window.event) {
alert(window.event.srcElement.id);
} else {
alert(evt.target.id);
}
return true;
}

But I still get the alert message I described in my first post.

JAS

 

[tsuji]

On the face of it, you set span's id and the input's id all to responseText-iID for some iID. It is not a good idea! Change the span id to some other closing ressemble value, such as this.
>newSpan.setAttribute('id','responseText-' + iID);
[tt]newSpan.setAttribute('id','responseText-[red]span-[/red]' + iID);[/tt]

 

[jaschulz]

Look again. The input id is set to "response-" + iID, and the span id is set to "responseText-" + iID.

Isn't that enough difference between them?

JAS

 

[tsuji]

That is, okay? my bad!

 

[tsuji]

I cannot reproduce the problem. Your problem lies elsewhere, not shown.

 

[tsuji]

And I hope thisItem is an array of _string_, not some element objects of alike, and it is desired to start from i=1, with i=0 safely neglected.

 

[jaschulz]

yes, thisItem is an array of string, and the 0 item has already been accessed before the loop begins.

JAS

 

[BillyRayPreachersSon]

Why don't you just post a URL?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tsuji]

I have a quick test script. You can make your own. You should then get to know where to doubt and where should not be doubted. Without further info, I have nothing to add.

 

[jaschulz]

OK here it is:

http://www.wiseware.com/test/testmaker.html

Thanks,

JAS

 

[BillyRayPreachersSon]

Try alerting "iID" in your "createResponseItem" function.

GIGO!

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jaschulz]

Mea Culpa.

I have no idea why I was using iStr = i.toString()

Must have been awfully late last night.

Thanks very much,

JAS