Jump to content

Scope Of Varibles


gauravc7
 Share

Recommended Posts

hi,i am very new to js & finding some problems in executing some things. my page code goes like this///////////////////////////////////////////////////////////////////////////////////////////////////////<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>my global variable</title><script type="text/javascript"> var k=document.miform.txt1; function f1() { alert(k.value); } </script> </head><body><form name="miform" action=""><input type="text" name="txt1" id="AA" /><input type="button" onclick="f1()" value="Click Me" /></form></body></html>///////////////////////////////////////////////////////////////////////////////////////////////////////////////////but if i write k=document.miform.txt1.value;inside the function f1() then this works well. i am not able to understand the one thing that when k is global & i have stored tx1 in k then i why i am not able to use it in entire js document.if i need to do any thing with this object k i can do it once i have the element inside kelse i will be required to write k=doc........ again & again in each function.

Link to comment
Share on other sites

outside the function, the var k=document.miform.txt1; looks for the input value before it has been created, so no value, and not even the input will be found.inside the function, the var k=document.miform.txt1; input value can now be found, obviously because the submit button is clicked therefore the input value is retrieved and the alert given.you could place var k=document.miform.txt1; at the bottom of the page.or use below code:var k;function getthisvalue(){k=document.miform.txt1;return k;}function f1() {k=getthisvalue();alert(k.value);}

Edited by dsonesuk
Link to comment
Share on other sites

To clarify a little more, when you have inline code like that it runs the code as soon as it gets to it. So, it's going to run the code as soon as it gets to the <head> section, before it has created anything in the <body> section. So the element you're trying to change doesn't exist yet. Any Javascript code that needs to modify things on the page needs to be set to run after the page loads, you can use the body's onload event for that. It's also a better practice to refer to your elements using getElementById instead of trying to access them by name. e.g.:

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>my global variable</title><script type="text/javascript">function f1() {  var k=document.getElementById("AA");   alert(k.value);}</script> </head><body onload="f1()"><form name="miform" action=""><input type="text" name="txt1" id="AA" value="txt1" /><input type="button" onclick="f1()" value="Click Me" /></form></body></html>

If you don't want to use onload, like dsonesuk said as long as your script block appears in the code after the element it's trying to modify it will still work.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...