How to use a global variable outside the script tag
I have a code which uses javascript and ajax to get values from a php script. That works well. My problem is I need to read and display the value of a counter which is decared and incremented inside a <script> tag outside of the script. In other words, once I get to </script> I start using <div> tags to display data. I would like to be able to display the current counter number that is produced inside the javascript functions. The variable I need to use is "questionNo". This counter is incremented each time ajax sends a request form the php script. Now I need to be able to use this value on the same static page but outside of the script. I have attached the php script with the variables.
This must be a super easy thing to do for anyone understanding javascript poperly. I have tried decalring it as a global variable but can't seem to access it. Anyway, take a look at the code and please let me know how to get and display the counter so I can use it within a <div> tag for easy display.
This must be a super easy thing to do for anyone understanding javascript poperly. I have tried decalring it as a global variable but can't seem to access it. Anyway, take a look at the code and please let me know how to get and display the counter so I can use it within a <div> tag for easy display.
<?php
include("game.php");
$reset = $_GET['reset'];
if($reset == 1) include("reset.php");
?>
<html>
<head>
<script type="text/javascript" src="miniajax.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
<script language="javascript">
var globalTimer,questionTimer;
var questionNo=0,interval=<?php echo $_session['delay1']; ?>,counter=interval;
var data;
var digits = [
"digits/0.gif",
"digits/1.gif",
"digits/2.gif",
"digits/3.gif",
"digits/4.gif",
"digits/5.gif",
"digits/6.gif",
"digits/7.gif",
"digits/8.gif",
"digits/9.gif" ];
var spacer = ["digits/spacer.gif"];
function init()
{
globalTimer=setInterval("checkCounter()",100);
data=document.getElementById("data");
getNewQuestion();
}
function checkCounter()
{
if (counter==0)
{
if (questionNo<10)
{
getNewQuestion();
}
else
{
document.getElementById('question').innerHTML='All Done !';
clearInterval(questionTimer); // Stop the timer
}
counter=interval;
}
displayTime(counter);
}
function startQuestionTimer()
{
counter=interval;
clearInterval(questionTimer);
questionNo=1;
questionTimer=setInterval("counting()",1000);
}
function pauseQuestionTimer()
{
clearInterval(questionTimer);
}
function resumeQuestionTimer()
{
questionTimer=setInterval("counting()",1000);
}
function skipToNext()
{
counter=0;
}
function counting()
{
counter--;
}
function displayTime(secs)
{
var ones = digits[secs%10];
var tens = digits[(secs - (secs%10))/10];
document.getElementById('iddate').innerHTML = "<img src='"+tens+"' /><img src='"+spacer+"' /><img src='"+ones+"' />";
}
function getNewQuestion()
{
questionNo++;
ajax.get("getQuestion.php?q="+questionNo, showQuestion);
}
function showQuestion(result)
{
document.getElementById('question').innerHTML=result;
}
</script>
</head>
<body onload="init()">
<table background="digits/clock-back.gif" width=350 height=190>
<TR>
<TD align="center">
<div id="iddate"></div>
</TD>
</tr></table>
<div id="q"><div id="question"></div></div>
<div id="data"></div>
<div id="buttons">
<input type=button onclick="startQuestionTimer()" value="Start">
<input type=button onclick="pauseQuestionTimer()" value="Pause">
<input type=button onclick="resumeQuestionTimer()" value="Resume">
<input type=button onclick="skipToNext()" value="SkipToNext"></div>
<div id="reset"><input type=button onclick="parent.location='run1.php?reset=1'" value="Reset questions"></div>
<div id="subject">Cinema and TV</div>
<div id="qnum">
// This is where I need the questionNo value to appear ///////////
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.