timer problem in javascript

M

magix

I got this error "document.getElementById(..) is null or not an
object,
and it puzzled me, why dTimer (the field that I defined) is getting
"undefined"
I have try to locate the rootcause, but I still not able to fix it yet

I'm using AJAX.

Here are the codes, and I wish someone can help me to fix the error


I got two files:
main_page.asp
child_page.asp

from main_page.asp, it will sendRequest via AJAX to child_page.asp

extracted code in main_page.asp:
================================

<script language="Javascript1.2" src="../scripts/xmlhttp.js"></script>

<script language="javascript">

var milisec=0;
var seconds =30;
var flag=0;

function displayTimer()
{

if (milisec<=0){
milisec=9 ;
seconds-=1 ;
}

if (seconds<=-1){
milisec=0 ;
seconds+=1 ;

... // some code here
SendRequest(1);
... // some code here

}
else
milisec-=1 ;
document.getElementById('dTimer').innerHTML= seconds
+"."+milisec ;
//THIS IS WHERE THE PROBLEM (pop up trigger exception) IS THAT
dTimer is NULL/NOT AN OBJECT from AJAX Request.
// SendRequest(0) from body onload will not go through this ELSE
statement, but sendRequest(1) from button in child_page.asp will.

setTimeout("displayTimer()",100) ;
}


var http = getXMLHTTPRequest();


function sendRequest(q)
{
var myurl = 'child_page.asp?q=';
myRand = parseInt(Math.random()*999999999999999);
var modurl = myurl + q + "&rand=" + myRand;
http.open("GET", modurl, true);
http.onreadystatechange = handleResponse;
http.send(null);
}

function handleResponse()
{

if(http.readyState == 4 && http.status == 200){
var response = http.responseText;
if(response) {
document.getElementById("ContentListing").innerHTML =
response;

milisec=0 ;
seconds = 30 ;
// if I do alert("dTimer" +
document.getElementById('dTimer').value); here, I will get
dTimer=undefined
displayTimer(); // THIS IS WHERE THE TIMER BEGIN AFTER
THE QUESTION is LOADED FROM AJAX RESPONSE.

}
}
else if(http.readyState == 4 && http.status == 500){
var response = http.responseText;
if(response) {
document.getElementById("ContentListing").innerHTML =
'<br><span class="gray">Error code: ' + http.status + '<br>Info: ' +
http.statusText + '</span>' ;
}
}
else {
document.getElementById('ContentListing').innerHTML = '<img
src="../images/ani_loading.gif" align="absmiddle"><span style="font-
family:arial; font-size:8pt; font-weight:bold;">&nbsp;Processing your
request. Please wait...</span>';
}
}


</SCRIPT>


<body onload="SendRequest(0)" bgcolor="#FFFFFF" marginwidth="4"
leftmargin="4" marginheight="0" topmargin="0">

<table border="0" cellpadding="0" cellspacing="0" style="border-
collapse: collapse" bordercolor="#111111" width="100%">

<div id="ContentListing"></div>
<input type="button" .... onClick="SendRequest(1)">

</table>


extracted code in child_page.asp:
================================


<table width="100%" border="0" cellspacing="0" cellpadding="0"
align="left">
<span id="dTimer"></span>
.... <!-- some code here->
</table>

================================


So the point is I already define the id = "dTimer" in my
child_page.asp, but
it showed that dTimer is undefined since start. I even use alert(..)
to trace the output of
document.getElementById('dTimer').value, and it said undefined. Is it
because the dTimer is dynamic, etc ?

Can you help to explain why the dTimer is undefined ? and how to fix
it ?
 
D

Doug Gunnoe

I got this error "document.getElementById(..) is null or not an
object,
and it puzzled me, why dTimer (the field that I defined) is getting
"undefined"
I have try to locate the rootcause, but I still not able to fix it yet

I'm using AJAX.

Here are the codes, and I wish someone can help me to fix the error

I got two files:
main_page.asp
child_page.asp

from main_page.asp, it will sendRequest via AJAX to child_page.asp

extracted code in main_page.asp:
================================

<script language="Javascript1.2" src="../scripts/xmlhttp.js"></script>

<script language="javascript">

 var milisec=0;
 var seconds =30;
 var flag=0;

function displayTimer()
{

 if (milisec<=0){
    milisec=9 ;
    seconds-=1 ;
 }

 if (seconds<=-1){
    milisec=0 ;
    seconds+=1 ;

    ...  // some code here
    SendRequest(1);
    ...  // some code here

 }
 else
    milisec-=1 ;
    document.getElementById('dTimer').innerHTML= seconds
+"."+milisec ;
     //THIS IS WHERE THE PROBLEM (pop up trigger exception) IS THAT
dTimer is NULL/NOT AN OBJECT from AJAX Request.
     // SendRequest(0) from body onload will not go through this ELSE
statement, but sendRequest(1) from button in child_page.asp will.

    setTimeout("displayTimer()",100) ;

}

var http = getXMLHTTPRequest();

function sendRequest(q)
{
           var myurl = 'child_page.asp?q=';
           myRand = parseInt(Math.random()*999999999999999);
           var modurl = myurl + q + "&rand=" + myRand;
           http.open("GET", modurl, true);
           http.onreadystatechange = handleResponse;
           http.send(null);
 }

function handleResponse()
{

       if(http.readyState == 4 && http.status == 200){
          var response = http.responseText;
          if(response) {
             document.getElementById("ContentListing").innerHTML =
response;

             milisec=0 ;
             seconds = 30 ;
             // if I do alert("dTimer" +
document.getElementById('dTimer').value); here, I will get
dTimer=undefined
             displayTimer();    // THIS IS WHERE THE TIMER BEGIN AFTER
THE QUESTION is LOADED FROM AJAX RESPONSE.

          }
       }
       else if(http.readyState == 4 && http.status == 500){
          var response = http.responseText;
          if(response) {
             document.getElementById("ContentListing").innerHTML =
'<br><span class="gray">Error code: ' + http.status + '<br>Info: ' +
http.statusText + '</span>' ;
          }
       }
           else {
                        document.getElementById('ContentListing').innerHTML = '<img
src="../images/ani_loading.gif" align="absmiddle"><span style="font-
family:arial; font-size:8pt; font-weight:bold;">&nbsp;Processing your
request. Please wait...</span>';
           }
    }

</SCRIPT>

<body onload="SendRequest(0)" bgcolor="#FFFFFF" marginwidth="4"
leftmargin="4" marginheight="0" topmargin="0">

<table border="0" cellpadding="0" cellspacing="0" style="border-
collapse: collapse" bordercolor="#111111" width="100%">

        <div id="ContentListing"></div>
        <input type="button" .... onClick="SendRequest(1)">

</table>

extracted code in child_page.asp:
================================

<table width="100%" border="0" cellspacing="0" cellpadding="0"
align="left">
  <span id="dTimer"></span>
   .... <!-- some code here->
</table>

================================

So the point is I already define the id = "dTimer" in my
child_page.asp, but
it showed that dTimer is undefined since start. I even use alert(..)
to trace the output of
document.getElementById('dTimer').value, and it said undefined. Is it
because the dTimer is dynamic, etc ?

Can you help to explain why  the dTimer is undefined ? and how to fix
it ?
Click to expand...

It's because 'dTimer' is in your child document and this:
'document.getElementById('dTimer')' just looks for dTimer in the
document it is written in.

To do what you want to do you have to create the child window: var
chldWin = window.open(stuff...)

then chldWin.document.getElementById('dTimer') will give you what
you're after.
 
S

SAM

magix a écrit :
extracted code in child_page.asp:
================================

<table width="100%" border="0" cellspacing="0" cellpadding="0"
align="left">
<span id="dTimer"></span>
.... <!-- some code here->
</table>

================================


document.getElementById('dTimer').value, and it said undefined. Is it
because the dTimer is dynamic, etc ?
Click to expand...

where do you see you have a "value" in <span id="dTimer"></span> ?

On most you could get an "innerHTML" but a "value" ... no
(value is an attribute of inputs)

to see if you can reach dTimer :
alert(document.getElementById('dTimer').id);
or :
alert(document.getElementById('dTimer')?)


if(document.getElementById('dTimer') {
alert('dTimer exists');
if(document.getElementById('dTimer').value)
alert('dTimer has a value');
else
alert('dTimer has no value');
if(document.getElementById('dTimer').innerHTML)
alert('contents of dTime =\n[ '+
document.getElementById('dTimer').innerHTML+' ]');
}
else alert('dTimer doesn\'t exist');
 
D

Doug Gunnoe

where do you see you have a "value" in <span id="dTimer"></span> ?
Click to expand...

That's true also. But isn't the OP trying to refer to a node in
another document by referencing the tree in the current document when
he does 'document.getElementById('dTimer')'? And that is why he gets a
null when he does alert (document.getElementById('dTimer'))?
 
S

SAM

Doug Gunnoe a écrit :
That's true also. But isn't the OP trying to refer to a node in
another document by referencing the tree in the current document when
he does 'document.getElementById('dTimer')'? And that is why he gets a
null when he does alert (document.getElementById('dTimer'))?
Click to expand...

Anyway I saw he tries to get immediately the non existing "value"
And (if I well understand) when he calls 'dTimer', this one have been
innered in main page in the element 'ContentListing'.

No, it is only because he searches an nonexistent "value".


$('dTimer') can exist
but
$('dTimer').value is a non sens ...
.... so ... hop ! "$('dTimer') has no properties" could be the result

or, if preferred : $('dTimer').value = undefined

var dT = document.getElementById('dTimer');
alert(typeof dT == 'undefined'); // false
alert(typeof dT.value == 'undefined'); // true

if(dT && dT.value) alert('dTimer value = '+dT.value);
else alert('dTimer has no value');
 
D

Doug Gunnoe

Anyway I saw he tries to get immediately the non existing "value"
And (if I well understand) when he calls 'dTimer', this one have been
innered in main page in the element 'ContentListing'.
Click to expand...

Oh OK. I see that now.
 
M

magix

Oh OK. I see that now.
Click to expand...

This code is about a Quiz Online, where each question will have a
timer.
I think I replied to SM, saying that I defined the value to <span
id="dTimer" value="30"></span>
Now I noticed following odd scenario:
SendRequest(1) to go to next question, can be triggered either:
- the time elapses until 0, or
- the user manually click the button in child_page.asp to go to next

So, my findings so far, as of now:
- If the time elapses itself until 0 and then go to next via
SendRequest(1), then no issue at all
- If the user clicks the button to trigger SendRequest(1) to go to
next , BEFORE the time elapses until 0, then that exception
"document.getElementById(..) is null or not an
object" triggered.

so why the dTimer id is not recognized, when go to next question
before time elapses till 0

cheers.
 
M

magix

This code is about a Quiz Online, where each question will have a
timer.
I think I replied to SM, saying that I defined the value to <span
id="dTimer" value="30"></span>
Now I noticed following odd scenario:
SendRequest(1) to go to next question, can be triggered either:
- the time elapses until 0, or
- the user manually click the button in child_page.asp to go to next

So, my findings so far, as of now:
- If the time elapses itself until 0 and then go to next via
SendRequest(1), then no issue at all
- If the user clicks the button to trigger SendRequest(1) to go to
next , BEFORE the time elapses until 0, then that exception
"document.getElementById(..) is null or not an
object" triggered.

so why the dTimer id is not recognized, when go to next question
before time elapses till 0

cheers.
Click to expand...



Issue resolved. I implemented some workaround within DisplayTimer(..)
function.

Thanks everyone.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone help me correct this code? It should be a two line countdown timer. 3
Php modal form to email 1
I am trying to make an audio player, how do I get the selected file to be playable? 5
How do I fix this issue in sqaurespace code block? 1
Javascript fill function data from multidimensonal array 0
Survey details won't go through using php, ajax, Mysql 0
I am trying to detect Which image id="" was clicked ? 22
ajax & php & javascript 3

Members online

Total: 73 (members: 2, guests: 71)
Robots: 502

Forum statistics

Threads
473,992
Messages
2,570,220
Members
46,807
Latest member
ryef

Latest Threads

Top