Setting onChange() on-the-fly? 1

[jsteph]

Hi all,
I'm trying to set the onChange function of an input element on-the-fly.

Basically the html starts as, say:
onChange="flagthis('xxx');"

The 'xxx' is a hard-coded string.

I want to change it to:
onChange="flagthis('yyy');"

The Input element is part of td element in a cloned table row. After I do the appendChild to append this new row to the table, I use a For loop to loop through all td elements--each of which has an input element within.

What I'm doing thenis the following (semi-pseudocode):

//newrow was cloned from an existing row and each of it's
//..input's has onChange="flagthis('xxx');"
//The newrow has just been appended to the table.
//(the below line works fine, I've omitted some previous code)
var newrow = tnewrow.getElementsByTagName('td')
for(i=0;i<newrowtds.length;i++){
    //below the childNode is the input element of the td
    tmpx='' + newrow[i].childNodes[0].getAttribute('onChange')
    tmpchg = tmpx.replace('xxx','yyy')
    newrow[i].childNodes[0].setAttribute('onChange',tmpchg)
}

I've debugged using an alert() and the variable tmpchg correctly replaces the 'xxx' with 'yyy'. But the setAttribute does *not* work. If I do an alert() showing the getAttribute of the onChange of that input immediately after the setAttribute--it still has the 'xxx' in it!

Can anyone tell me if something is wrong here?
--Thanks,
--Jim

 

[BillyRayPreachersSon]

I know that using eval is so bad for most scenarious, but given you want to convert a string to code, give this a go:

newrow[i].childNodes[0].onchange = eval(tmpchg);

Personally, I'd not use eval, nor have inline "onchange" handlers hard-coded at all, opting for re-attaching the events all the time.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

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

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

[/tt]

 

[tsuji]

[tt]for([blue]var[/blue] i=0;i<newrowtds.length;i++){
//below the childNode is the input element of the td
[red]//[/red]tmpx='' + newrow.childNodes[0].getAttribute('onChange')
[red]//[/red]tmpchg = tmpx.replace('xxx','yyy')
[red]//[/red]newrow.childNodes[0].setAttribute('onChange',tmpchg)
[blue]//childNodes[0] is _not_ robust! If there is whitespace it will fail on moz.[/blue]
newrow.getElementsByTagName("input")[0].onclick=function() {flagthis('yyy')};
}
[/tt]

 

[jsteph]

tsuji,
Thanks, that worked!

As I experiment with some of this on-the-fly changing, how can I look at the 'real' html that's generated?

I'm not talking about the 'view source' option--since that only shows the page as it came from the website. I'm talking about how can I see my on-the-fly changes, after the javascript changes things?

Thanks,
--Jim

 

[yngjzy12]

The Firebug plugin for Firefox is a good one.

https://addons.mozilla.org/en-US/firefox/addon/1843

 

[jsteph]

Anyone have any suggestions for IE7? Our company is standardized on ie7 and all our intranet is targeted to ie7.
Thanks,
--Jim