Javascript In Expression Web

[webmaster]

I have a form in Expression Web with a preset value. When the visitor clicks on it, the text clears. In expression web, the code looks like this:

<script type="text/javascript"><!--function FP_setTextFieldText(id,txt,form) {//v1.0 var el=FP_getObjectByID(id); if(el!=null) el.value=txt;}function FP_getObjectByID(id,o) {//v1.0 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id); else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el; if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c) for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; } f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements; for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } } return null;}// --></script>

And the input field looks like this:

<input name="Text1" value="somevalue" onclick="FP_setTextFieldText(/*id*/'Text1', 'test', /*id*/'0')" type="text" />

I can do the same thing by hand with one line of code. Why is so much extra JavaScript generated in Expression Web?

[chibineku]

Because Expression Web, in my experience, sucks.It generates new, complicated bits of code everywhere, especially for CSS. Why use it if you can code by hand? I reckon it'll be quicker in the long run.

[webmaster]

Because Expression Web, in my experience, sucks.It generates new, complicated bits of code everywhere, especially for CSS. Why use it if you can code by hand? I reckon it'll be quicker in the long run.

I use it because it is what my college class teaches me. I combine it's code with hand coding. I just want to know what is with that gibberish.

[Ingolme]

function FP_getObjectByID(id,o) {//v1.0var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }return null;}

This function is supposed to be a cross-browser substitute for getElementById().It is extremely old, from what I can see. They're checking for "document.layers" and "document.all" and other things that belong to browsers that haven't been used since the 90's.All of the code is really old, and I usually don't encourage people to code like that. The HTML is worse: They're looking for an ID but the element only has a name attribute.The main reason that the code is so long is that back then, browsers were all very different from eachother, so the same scripts wouldn't work on all of them without testing different features and using different methods depending on what was detected.Anyways, all of the code can be shortened to the following:

<input type="text" name="Text1" value="somevalue" onclick="this.value='';" />

[webmaster]

function FP_getObjectByID(id,o) {//v1.0var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }return null;}

This function is supposed to be a cross-browser substitute for getElementById().It is extremely old, from what I can see. They're checking for "document.layers" and "document.all" and other things that belong to browsers that haven't been used since the 90's.All of the code is really old, and I usually don't encourage people to code like that. The HTML is worse: They're looking for an ID but the element only has a name attribute.The main reason that the code is so long is that back then, browsers were all very different from eachother, so the same scripts wouldn't work on all of them without testing different features and using different methods depending on what was detected.Anyways, all of the code can be shortened to the following:

<input type="text" name="Text1" value="somevalue" onclick="this.value='';" />

Oh. Thanks. The way you showed me is even easier than the way i've been clearing it (creating a fuction).Also, what would happen if I don't use this in this.value?

[Guest FirefoxRocks]

Oh. Thanks. The way you showed me is even easier than the way i've been clearing it (creating a fuction).Also, what would happen if I don't use this in this.value?

It wouldn't know which input to set the value to.

[webmaster]

It wouldn't know which input to set the value to.

I modified the code without 'this' and it worked fine. I am (somewhat) new to Javascript, so I would like some clarification about what this actually does, and what happens if not used.

[Ingolme]

this refers to the element that's dispatching the onclick event. It is important for you to use it if you want it to work well across all browsers. If you just write value='' it may just modify a variable called value, especially if you declared such a variable earlier in the document.It possibly is working for you without this because the browser was designed to be flexible with incorrect scripts. I'm not sure which browser you're using, so I can't give more details about it.

[webmaster]

this refers to the element that's dispatching the onclick event. It is important for you to use it if you want it to work well across all browsers. If you just write value='' it may just modify a variable called value, especially if you declared such a variable earlier in the document.It possibly is working for you without this because the browser was designed to be flexible with incorrect scripts. I'm not sure which browser you're using, so I can't give more details about it.

Thanks for the reply. That helped me understand it better. Anyway, I tested the code in both Firefox and IE7.

[justsomeguy]

I'm not sure if setting this is defined in the spec for things like this, i.e. if you have some inline code in an onclick, I'm not sure if the spec specifically says to set this to the element that the code is part of or not. If it's not, that's where you'll see a problem because browser vendors are free to do what they want unless it's explicitly defined. If this doesn't get set to the element that the code is attached to, then it will usually refer to the window object instead, so you would be setting window.value in that example.