Cannot assign variable to element

Dev Shed Forums Sponsor:

February 25th, 2011, 12:37 PM

idlackage@yahoo

Contributing User

Join Date: Oct 2009

Posts: 34

Time spent in forums: 13 h 58 m 56 sec
Reputation Power: 8

Cannot assign variable to element

I have several lines of code in different functions where I need to refer to elements in document.form.max, so I figured I would define it as a global variable called tb1 to shorten the writing. The result however is the page senses an error as soon as it gets to tb1.value, of which I can't figure out why since things work when I change tb1 into a local variable. I was under the impression that global = full scope, so I'm not sure what's wrong here.

Code:

<html>
<head>
<script language="javascript" type="text/javascript">

var tb1 = document.getElementById('textbox1');
	
function output() {
    var max = tb1.value;
    document.write( max );
}

</script>
</head>

<body>

<form>
<input name="max" type="text" id="textbox1"><br>
<input name="submit" type="button" value="Enter" onClick="output()">
</form>

</body>
</html>

February 25th, 2011, 01:28 PM

Winters

Super Moderator

Join Date: Jul 2003

Posts: 3,874

Time spent in forums: 1 Month 2 Weeks 1 Day 17 h 30 m 25 sec
Reputation Power: 2569

You are assigning the element 'textbox1' to your 'tb1' variable before the page has loaded, i.e. 'textbox1' doesn't exist yet. Put the variable within your function.

February 25th, 2011, 01:32 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

Quote:

I was under the impression that global = full scope

1) Yes. However, DOM look-ups only work after the element has been created. You're trying to access an element before that part of the page has been loaded.

2) The language attribute of the <script> element is deprecated, so don't use it. Just use the type attribute.

3) document.write() will overwrite the contents of the page if it's used after the page has finished loading.

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

February 25th, 2011, 02:19 PM

TheOtherDino

Contributing User

Join Date: Jan 2010

Location: Katy, Texas

Posts: 489

Time spent in forums: 4 Days 18 h 25 m 29 sec
Reputation Power: 198

What I'll typically do is define the global, but set it to null.

Then, which ever function needs it, can first test for null, and if null, calls a small function to set it.

__________________
Do you agree? Disagree? And remember, it's all about the reputation power...

February 25th, 2011, 08:04 PM

cueball

Banned

Join Date: Feb 2011

Posts: 11

Time spent in forums: 3 h 26 m 10 sec
Reputation Power: 0

Like the others said, you cannot access an element with javascript until it has been loaded.

You have all your js in the <head>, so none of the body elements have been created when your js is run.

You have 3 choices.

1) put the tb1 definition inside the function.

2) put the tb1 definition inside a window.onload event handler (see demo below) which runs after all the body elements and images have been loaded.

3) take your <script> element out of the <head> and put it just before the </body>.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            function output() {
                var max = tb1.value;
                document.getElementById('result').innerHTML = max;
            }
            window.onload=function(){
                tb1 = document.getElementById('textbox1'); //tb1 is now global
            }
        </script>
    </head>
    <body>
        <form>
            <input name="max" type="text" id="textbox1" /><br />
            <input name="submit" type="button" value="Enter" onclick="output()" />
        </form>
        <div id="result"></div>
    </body>
</html>

February 26th, 2011, 07:50 PM

idlackage@yahoo

Contributing User

Join Date: Oct 2009

Posts: 34

Time spent in forums: 13 h 58 m 56 sec
Reputation Power: 8

Thanks to everyone, got the script working. When I transferred the idea of this to another script though, it didn't work for some reason.

I have this

Code:

function output() {
	a = document.getElementById( 'textbox1' );
	b = eval( a.value );
	// If box 'a' is empty, then 'b' will have a value of 10.
	isEmpty( a, b, 10 );
}

// If 'tbox' is empty, then variable 'n' will have a value of 'val'.
function isEmpty( tbox, n, val ) {
    if( tbox.value.length == 0 ){
        n = val;
    }
}

This worked when I directly referred to 'a' in isEmpty (replacing variable 'tbox' with just 'a'), but not when it's dynamic like right now--the value of 'b' would show up as undefined. What's the problem here?

February 26th, 2011, 09:47 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

It's best to avoid using eval(). What purpose are you trying to achieve by using it here?

February 26th, 2011, 11:05 PM

idlackage@yahoo

Contributing User

Join Date: Oct 2009

Posts: 34

Time spent in forums: 13 h 58 m 56 sec
Reputation Power: 8

Quote:

Originally Posted by Kravvitz

It's best to avoid using eval(). What purpose are you trying to achieve by using it here?

I'm trying to use it as a numerical value in an addition equation.

February 26th, 2011, 11:22 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

Then use one of these:

Code:

b = parseInt( a.value, 10 );

Code:

b = parseFloat( a.value );

Code:

b = Number( a.value );

#10

February 27th, 2011, 11:58 AM

idlackage@yahoo

Contributing User

Join Date: Oct 2009

Posts: 34

Time spent in forums: 13 h 58 m 56 sec
Reputation Power: 8

Quote:

Originally Posted by Kravvitz

Then use one of these:

Code:

b = parseInt( a.value, 10 );

Code:

b = parseFloat( a.value );

Code:

b = Number( a.value );

Thanks. Whether or not I'm using numerical though, things are still returning 'undefined'.

#11

February 27th, 2011, 01:47 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

Both of those functions would return "undefined" because there is no return value specified.

What is the purpose of the isEmpty function anyway?

By the way, it's best to avoid using global variables.

#12

February 27th, 2011, 02:06 PM

idlackage@yahoo

Contributing User

Join Date: Oct 2009

Posts: 34

Time spent in forums: 13 h 58 m 56 sec
Reputation Power: 8

Quote:

Originally Posted by Kravvitz

Both of those functions would return "undefined" because there is no return value specified.

Am I supposed to return 'val'? Things have worked with no return value--isEmpty is only used to substitute values for shortening code, not really to do anything with the actual variables.

Quote:

What is the purpose of the isEmpty function anyway?

Suppose I have this in the output() function:

Code:

if( document.form.a_box.value.length == 0 ){
    a_val = 10;
}
if( document.form.b_box.value.length == 0 ){
    b_val = 1;
}
if( document.form.c_box.value.length == 0 ){
    c_val = 1;
}
if( document.form.d_box.value.length == 0 ){
    d_val = " | ";
}
if( document.form.e_box.value.length == 0 ){
    e_val = "\n\n";
}

The purpose of isEmpty is to do the exact same thing, except instead of rewriting ten if statements I can just write isEmpty( a_box, a_val, 10 ); instead.

Quote:

By the way, it's best to avoid using global variables.

I'm all for learning another way to do this, but for the purposes of just writing one small program, I'm not really concerned right now of what I should avoid as long as it works.

#13

February 27th, 2011, 02:46 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

Using global variables with a helper function like that is more complicated than using local variables.

You could check if the value is an empty string instead of checking the length.

Perhaps this is what you want:

Code:

function output() {
  var a = document.getElementById( 'textbox1' );
  a.value = defaultValues( a.value , 10 );
}

function defaultValues( n, val ) {
  if( n == '' ){
    return val;
  }
  return n;
}

Cannot assign variable to element

Developer Shed Advertisers and Affiliates