A problem with IE and my javascript code

[studymaths]

Hi,I have written a game which seems to work fine in all browsers except Internet Explorer.Basically the game involves people working together to answer one million sums and the count decreases by one for each correct question.The game can be viewed here: Race to one millionThe code where I suspect the error lies is here:

function getTotal()			{				var error = 0;					if (init) {init = false; error = 1}								if (window.XMLHttpRequest)				{// code for IE7+, Firefox, Chrome, Opera, Safari					xmlhttp=new XMLHttpRequest();				}				else				{// code for IE6, IE5					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");				}				xmlhttp.onreadystatechange=function()				{					if (xmlhttp.readyState==4 && xmlhttp.status==200)					{						document.getElementById("total").innerHTML=xmlhttp.responseText;					}				}				xmlhttp.open("GET","raceUpdate.php?error="+error,true);				xmlhttp.send();				createQuestion();			}

The php file looks like this:

<?php$error = $_REQUEST['error'];$filename = "raceQuestions.txt";$content = file($filename);//put content in array$array = explode(",", $content[0]);$yes = $array[0];if ($error == 0) {$yes = $yes + 1;}$insertQuestion = $yes;$fp = fopen($filename,"w");fputs($fp,$insertQuestion);fclose($fp);echo("In total " . $yes . " sums have been correctly answered so far...");echo("<h1>Only " . (1000000 - $yes) . " to go!</h1>");?>

For some reason IE stops counting after the first question and wont count any more? As I mentioned, other browsers seem to work. I would be extremely grateful if you could help me!Thanks,Jonathan

[Ingolme]

Instead of if... else, use try...catchMaybe I'm wrong, but in my past experiences I found that Internet Explorer does have an XMLHttpRequest object except that it doesn't do anything.

try {  xmlhttp=new XMLHttpRequest();} catch {  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

[MrFish]

There is not a lot to go off of here. Your createQuestion() function may also have an error which halts the script. If that's not the case then try to alert the returned data. If you are getting information then your error probably lies in printing the data. IE can be picky about how you use innerHTML. What does your div look like with the id "total"?Edit: In response to Ingolme. I think studymaths said the code runs at least once so I wouldn't think it would be that bit of code. But worth a try.

[studymaths]

Yeah the code seems to execute once in IE and the count decreases by one, but then when you refresh the page the answer goes back up to where it started.The html code looks like this

				<div style="width: 75%; border: 2px solid black; background-color: #bbbbff">					<div style="background-color: #bbbbff" id="total"></div>					<br>					<h3 id="check">Type your answer below.</h3>					<h2 class="question" id="question">						<input class="answerBoxMedium" id="answer" onkeyup="checkAnswer()">					</h2>				</div>

The entire javascript looks like:

<script type="text/javascript">			var init = true;			var question = "";			var answer = -1;			function checkAnswer() {				if (document.getElementById('answer').value == answer) {					getTotal();					document.getElementById('check').style.color = "green";					document.getElementById('check').innerHTML = "Correct, try another!";					document.getElementById('answer').focus();				}			}						function createQuestion() {				question = "";				var x = 1 + Math.floor(Math.random() * 12);				var y = 1 + Math.floor(Math.random() * 12);				var type = Math.floor(Math.random() * 4);				switch (type) {					case 0: {question += x + " + " + y + " = ";answer = x + y;break}					case 1: {question += x + y + " - " + y + " = ";answer = x;break}					case 2: {question += x + " x " + y + " = ";answer = x * y;break}					case 3: {question += x * y  + " ÷ " + y + " = ";answer = x;break}				}				question += "<input class='answerBoxMedium' id='answer' onkeyup='checkAnswer()'>";				document.getElementById('question').innerHTML = question;				document.getElementById('answer').value = "";				document.getElementById('answer').focus();			}			function getTotal()			{				var error = 0;				if (init) {init = false; error = 1}								try {					xmlhttp=new XMLHttpRequest();				}				catch(err) {					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");				}				xmlhttp.onreadystatechange=function()				{					if (xmlhttp.readyState==4 && xmlhttp.status==200)					{						document.getElementById("total").innerHTML=xmlhttp.responseText;					}				}				xmlhttp.open("GET","raceUpdate.php?error="+error,true);				xmlhttp.send();				createQuestion();			}		</script>

Does this help the diagnosis?Thanks,Jonathan

[justsomeguy]

I suspect the problem may relate to the use of Comic Sans.

[thescientist]

are you checking for errors in the IE console?

[studymaths]

are you checking for errors in the IE console?

Yes, it's not reporting any errors. It just doesn't seem to be writing the data to the text file.The text file just contains a number corresponding to how many sums have been answered. The other browsers manage to increase this by one each time.

[thescientist]

i think I know what the problem might be. IE has a nasty habit of caching ajax requests, and since each of your are essentially the same, it's not going to execute them repeatedly because it thinks it already made the same request. The simple solution is to append a timestamp to each request, thus making each request seem 'new' since a unique number will be part of every request. Here's how, given the context of your application.

		function getTotal()			{				var error = 0;				var timestamp = new Date.getTime();  //get a unique number for every request				if (init) {init = false; error = 1}								try {					xmlhttp=new XMLHttpRequest();				}				catch(err) {					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");				}				xmlhttp.onreadystatechange=function()				{					if (xmlhttp.readyState==4 && xmlhttp.status==200)					{						document.getElementById("total").innerHTML=xmlhttp.responseText;					}				}				var requestUrl = "raceUpdate.php?error=" + error + "&rand=" + timestamp;  //make it part of the request Url				xmlhttp.open("GET",requestUrl,true);				xmlhttp.send();				createQuestion();			}

[studymaths]

i think I know what the problem might be. IE has a nasty habit of caching ajax requests, and since each of your are essentially the same, it's not going to execute them repeatedly because it thinks it already made the same request. The simple solution is to append a timestamp to each request, thus making each request seem 'new' since a unique number will be part of every request. Here's how, given the context of your application.

Thank you so much! It (hopefully) now works perfectly.