...

View Full Version : Keep getting object is null/ not object error



SpiritualStorms
10-31-2004, 03:00 AM
<P>

<center>

<font color="black" size="2px">

Please enter the number of rows you want for your

table:

<br>

<form name="rows">

<input type="text" name="cellNumber" size=6>

</form>

</font>
</center>
</p>
<BR>


I am basically modifying Mr. J's costume made confirm box to include a text field. At any rate, the confirmed box will be activated by one function, a function that basically alters the visiability status of the confirmed box. Once the confirm box pops up, the visitor has the option of typing something, and then clicking send. My aim is to see if i understand the idea of control flow.

At any rate, here's the function that is activated, when the send button is clicked:


<script language="JavaScript1.2">

var rowsTotal;

function numbOfRows(){

var rowNumb=document.forms.rows.cellNumber;

if(rowNumb.value!=-1){
alert("You typed " + rowNumb.value + "\n");
}
else{
alert("You have left the field blank!");
}
}

rowsTotal = numbOfRows();

</script>

At any rate, i keep getting an error message.

posinot
10-31-2004, 05:10 AM
You are calling the function before the element exists. Move the script below the markup, or define the variable onload.

SpiritualStorms
10-31-2004, 06:19 AM
How can that be, since i am calling the function long after the page has loaded? When the page loads, i have a menu with a few buttons. On one of the buttons, i click, and the costume confirm box is launched. As i said before, on that confirm box, there is a type field. A number is supposed to be typed. once typed, the visitor is supposed to hit a button that says, "Send." Once the button is clicked, the confirm box is supposed to disappear. From the point forward, i can hit another button, and alert what was typed in.

If i use an onload, then i wont be able to control when the confirm box appears. I do not want the confirm box to appear the minute the page loads. I want it to appear, after the page loads.




<html>

<head>

<title> Table_Creator </title>

<style>

.controlpanel {position:absolute;top:70px;left:40px;
width:60px;height:250px;
background-color:teal;padding:10px;}

.butt{width:75px;height:20px;text-align:center;font-size:14px;vertical-align:center;color:#b2a682;border:1px solid #d4c8b4; background:#9f9573;cursor:hand}


.buttover{width:75px; height:20px;text-align:center;font-size:14px;vertical-align:center;color:#ffffff;border:1px solid #b2a682; background:#c9bda9;cursor:hand}


.buttdown{width:75px; height:20px;text-align:center;font-size:14px;vertical-align:center;color:#404000;border:1px solid #908460; background:#9f9573;cursor:hand}
</style>


</head>

<body>
<br>
<script language="JavaScript1.2">
<!--
/*Credit JavaScript Kit www.javascriptkit.com*/

var dragapproved=false
var z,x,y

function move(){
if (event.button==1 && dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}


function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>

<script>
<!--

function showHide(layerid){
if (document.getElementById(layerid).style.visibility != "hidden"){
document.getElementById(layerid).style.visibility = "hidden";
}else{
document.getElementById(layerid).style.visibility = "visible";
}
}

function function1(){
alert("This calls a function or whatever")
}
//-->
</script>

<script language="JavaScript1.2">

var rowsTotal;

function numbOfRows(){

var rowNumb=document.forms.['rows']['cellNumber'];

if(rowNumb.value!=-1){
alert("You typed " + rowNumb.value + "\n");
}
else{
alert("You have left the field blank!");
}
}

rowsTotal = numbOfRows();

</script>

<script language="JavaScript1.2">

function testOne(){

alert("Hello!. I am function \"testOne!\"");

}

function testTwo(){

alert("Hello!. I am function \"testTwo!\"");

}

</script>

</HEAD>


<BODY bgcolor="red">



<div class="controlpanel">


<form name="frm_A">
<input type="button" value="Show Dialogue" name="bttn_B" onClick="showHide('conFirm');">
<br>


<input type="button" value="Total Rows" name="bttn_C" onClick="numbOfRows();">
<br>


<input type="button" value="Potential Button" name="bttn_C" onClick="testOne();">
<br>

<input type="button" value="Potential Button" name="bttn_C" onClick="testTwo();">
<br>
</form>

</div>


<DIV id="conFirm" class="drag" style="position:absolute;left:300px;top:120px; width:250px;color:#FFFFFF;font-weight:bold;color:#FFFFFF;border-top:2px solid #ffffff; border-left:2px solid #ffffff; border-right:2px solid #808080; border-bottom:2px solid #808080; background:#c9bda9;visibility:hidden;z-index:5">


<div style="height:20px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FF9f9573', EndColorStr='#FFc9bda9';padding:5px;)">

Number of Rows:</div>


<P>

<center>

<font color="black" size="2px">

Please enter the number of rows you want for your table:

<br>
<form name="rows">
<input type="text" name="cellNumber" size=6>
</form>

</font>
</center>
</p>
<BR>


<div style="position:absolute;left:30px;top:130px" class="butt" onmouseover="this.className='buttover'" onmousedown="this.className='buttdown'" onmouseup="this.className='buttover'" onmouseout="this.className='butt'" onclick="showHide('conFirm')">Send</div>


<div style="position:absolute;left:135px;top:130px" class="butt" onmouseover="this.className='buttover'" onmousedown="this.className='buttdown'" onmouseup="this.className='buttover'" onmouseout="this.className='butt'" onclick="showHide('conFirm')">Cancel</div>
<BR>

</DIV>

</body>

</html>

Again, before some rude retro ape charges me with plagiarism, the above is a slight modification of a script by Mr. J. The link i think is,

http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../style/alert.htm&2

That to my opinion is where the costume confirm box first appeared to me.

posinot
10-31-2004, 06:29 AM
I told you why the error is occurring.

Another error in your syntax is: forms.['rows'] --remove the dot.

SpiritualStorms
10-31-2004, 08:25 AM
I told you why the error is occurring.


Yes you did, but i also said that couldnt be. Have you even checked my code? Do you even know what is involved?


Another error in your syntax is: forms.['rows'] --remove the dot.

Yes, i removed that too, but somehow i keep running into errors.


You are calling the function before the element exists. Move the script below the markup, or define the variable onload.

How do i define a variable on onload? And which script am i supposed to move to the bottom of the page?

This doesnt make any sense. The form is in a div tag that acts as a custom confirm box. The visiability of the custom confirm box is altered by the press of a button. How can the form not exist at the time i press the button to alter the visiability status? It doesnt make sense to me.

posinot
10-31-2004, 08:33 AM
What do you suppose this line does?

rowsTotal = numbOfRows();

Puffin the Erb
10-31-2004, 08:51 AM
You need to change the relevant line in the numbOfRows() function to this :

var rowNumb=document.forms['rows'].cellNumber;

Then comment out this line :

rowsTotal = numbOfRows();

like this:

//rowsTotal = numbOfRows();

SpiritualStorms
10-31-2004, 09:30 AM
from posinot:

What do you suppose this line does?
rowsTotal = numbOfRows();


I thought i was storing the value of the function in the variable?

Should i be using a return statement? And if so, do i just say, return? Or i should be returning a variable within the function? Never really did fully understand the return statement.

SpiritualStorms
10-31-2004, 09:39 AM
from Puffin The Erb:

You need to change the relevant line in the numbOfRows() function to this :

var rowNumb=document.forms['rows'].cellNumber;

Then comment out this line :

rowsTotal = numbOfRows();

like this:

//rowsTotal = numbOfRows();

I have done all of the above. i am "now" getting error "Object expected", line 116, char 1.

I am not winning here.

Take a look:


<script language="text/javascript">

var rowsTotal="";

function numbOfRows(){

var rowNumb=document.forms['aunt'].uncle;

if(rowNumb.value!=-1){
alert("You typed " + rowNumb.value + "\n");
rowNumb.value="";
}
else{
alert("You have left the field blank!");
}
}

//rowsTotal = numbOfRows();
function showDataTyped(){
alert(rowsTotal);
}
</script>

Then there is this part:


<div style="position:absolute;left:30px;top:130px" class="butt" onmouseover="this.className='buttover'" onmousedown="this.className='buttdown'" onmouseup="this.className='buttover'" onmouseout="this.className='butt'" onclick="numbOfRows();"> Send </div>

Somehow, somewhere, the error refers specifically this part of the code. I only get it, when i hit the send button. Nowhere else, do i as of yet, get any other errors.

Is there a trick to making the cursor jump to the suggested line of code? I have no idea how it counts lines. Would make coding easier, if i knew where exactly the line it refers to was.

posinot
10-31-2004, 11:46 AM
Yeah, you'd need a return statement in the function for that sort of reference to work (the variable would be assigned the return value).

To find the error line# in Notepad.exe, uncheck Word Wrap from the Format menu, then go to the
Edit menu, click Go To, enter the line#, and click OK.

SpiritualStorms
10-31-2004, 01:18 PM
As usual, no resolution has been found. As i had suspected, the line 116 was precisely at the point i thought it was. I did what you said. I unchecked word wrap, then went to Edit, and from it, i chose go to. In the prompt box, i typed the line number, and still, i examined the line, and i still do not know what object i am supposed to be making sure that it exists.

Thankz for the Go To Command. It will save me a lot of hair pulling when i scan for errors.

Willy Duitt
10-31-2004, 04:00 PM
Again, before some rude retro ape charges me with plagiarism, the above is a slight modification of a script by Mr. J.

Yeah, I hear you... You need to watch those rude retro apes!! It is my understanding that they often irreparably harm the tender psyche of thin skinned little sissies.... :eek:

http://img90.exs.cx/img90/9294/RudeApe.gif

.....Willy :D

SpiritualStorms
10-31-2004, 04:02 PM
LOL. Now theres the Willy i once knew, and loved to hate. Welcome back, you ole fart.

Seriously, though, the null business is really putting miles on my age-ometer. Knows that i mean?

Puffin the Erb
10-31-2004, 04:06 PM
Your code has changed since the original post.
Adapting your original post worked for me.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Original</title>
<style>

.controlpanel {position:absolute;top:70px;left:40px;
width:60px;height:250px;
background-color:teal;padding:10px;}

.butt{width:75px;height:20px;text-align:center;font-size:14px;vertical-align:center;color:#b2a682;border:1px solid #d4c8b4; background:#9f9573;cursor:hand}

.buttover{width:75px; height:20px;text-align:center;font-size:14px;vertical-align:center;color:#ffffff;border:1px solid #b2a682; background:#c9bda9;cursor:hand}

.buttdown{width:75px; height:20px;text-align:center;font-size:14px;vertical-align:center;color:#404000;border:1px solid #908460; background:#9f9573;cursor:hand}
</style>

</head>
<body>
<br>
<script language="JavaScript1.2">
<!--
/*Credit JavaScript Kit www.javascriptkit.com*/

var dragapproved=false
var z,x,y

function move(){
if (event.button==1 && dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}


function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>

<script>
<!--

function showHide(layerid){
if (document.getElementById(layerid).style.visibility != "hidden"){
document.getElementById(layerid).style.visibility = "hidden";
}else{
document.getElementById(layerid).style.visibility = "visible";
}
}

function function1(){
alert("This calls a function or whatever")
}
//-->
</script>

<script language="JavaScript1.2">

var rowsTotal;

function numbOfRows(){

var rowNumb=document.forms['rows'].cellNumber;

if(rowNumb.value!=-1){
alert("You typed " + rowNumb.value + "\n");
}
else{
alert("You have left the field blank!");
}
}

//rowsTotal = numbOfRows();

</script>

<script language="JavaScript1.2">

function testOne(){

alert("Hello!. I am function \"testOne!\"");

}

function testTwo(){

alert("Hello!. I am function \"testTwo!\"");

}

</script>
</head>

<body onLoad="rowsTotal">
<html>

<head>

<title> Table_Creator </title>



</head>


<body bgcolor="red">
<div class="controlpanel">
<form name="frm_A">
<input type="button" value="Show Dialogue" name="bttn_B" onClick="showHide('conFirm');">
<br>
<input type="button" value="Total Rows" name="bttn_C" onClick="numbOfRows();">
<br>
<input type="button" value="Potential Button" name="bttn_C" onClick="testOne();">
<br>

<input type="button" value="Potential Button" name="bttn_C" onClick="testTwo();">
<br>
</form>
</div>
<div id="conFirm" class="drag" style="position:absolute;left:300px;top:120px; width:250px;color:#FFFFFF;font-weight:bold;color:#FFFFFF;border-top:2px solid #ffffff; border-left:2px solid #ffffff; border-right:2px solid #808080; border-bottom:2px solid #808080; background:#c9bda9;visibility:hidden;z-index:5">
<div style="height:20px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FF9f9573', EndColorStr='#FFc9bda9';padding:5px;)">
Number of Rows:</div>
<p>
<center>
<font color="black" size="2px">
Please enter the number of rows you want for your table:
<br>
<form name="rows">
<input type="text" name="cellNumber" size=6>
</form>
</font>
</center>
</p>
<br>
<div style="position:absolute;left:30px;top:130px" class="butt" onmouseover="this.className='buttover'" onmousedown="this.className='buttdown'" onmouseup="this.className='buttover'" onmouseout="this.className='butt'" onclick="showHide('conFirm')">Send</div>
<div style="position:absolute;left:135px;top:130px" class="butt" onmouseover="this.className='buttover'" onmousedown="this.className='buttdown'" onmouseup="this.className='buttover'" onmouseout="this.className='butt'" onclick="showHide('conFirm')">Cancel</div>
<br>
</div>
</body>
</html>

SpiritualStorms
10-31-2004, 04:09 PM
Actually, i am suprised, considering the fact that there is like more than one closing head tag in the whole code.

At any event, i tweak, in the hopes of hitting the answer, but generally to no avail. I swear, the time i have spent learning JavaScript has taken away from learning something a bit more practical, like Java, or Perl.

Puffin the Erb
10-31-2004, 04:14 PM
Luckily those are optional tags, it was all the script sections and deprecated stuff you're using that does my head in a little!

SpiritualStorms
10-31-2004, 04:17 PM
You know, i decided to copy what you pasted, and oddly enough, it works. I did remove the extra tags that made it look repetitive though, like having 2 opening body tags, and 2 closng tags. I dont really understand it though. It is essentially the same friggin code, but somehow in one version it works, while in another it does not.

Mind pointing out which are the depecrated stuff? Would like to modernise if at all possible.

Puffin the Erb
10-31-2004, 04:22 PM
Deprecated :

<center>
<font>

and the language attribute of the <script> tag.

Solution :

Use StyleSheets for the first two, keep the language attribute for compatibility if you wish but add type="text/javascript" to the line.

SpiritualStorms
10-31-2004, 04:31 PM
Ok, i am lost again.

When i comment out a line, and i call another function to alert me of whether or not a number is stored, it will give me like the whole code for the whole function. However, when i dont comment the line out, it gives me an undefined alert.


var rowsTotal;

function numbOfRows(){

var rowNumb=document.forms['rows'].cellNumber;

if(rowNumb.value!=-1){
alert("Your input is on its way to storage!");
rowNumb.value="";
}
else{
alert("You have left the field blank!");
}
return;
}

//rowsTotal=numbOfRows;

function showContent(){
alert(rowsTotal);
}

I have messed with the line in red, but doesnt give me my desired results. And for the blue, i am assuming that by throwing in the return statement, i will somehow achieve my desired goal. Am i supposed to create an extra local variable for the return command?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum