Problem with getting javascript to run correctly in firefox

[chanshaw]

Alright this runs just fine in IE but in firefox I get nothing

			function startup()
			{
				if (window.ActiveXObject)
				{
					xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
				}
				else if (document.implementation.createDocument)
				{
					xmlDoc=document.implementation.createDocument("","",null);
				}
				else
				{
					alert('Your browser cannot handle this script');
				}	
				if (xmlDoc!=null)
				{
					xmlDoc.async=false;
					xmlDoc.load("XML/faq.xml");
					var x=xmlDoc.getElementsByTagName("QUES");
					for (i=0;i<x.length;i++)
					{
						t = x[i].getElementsByTagName("CAT")[0].childNodes[0].nodeValue;
						categories.push(t);
					}
					var categoryList = categories.unique();
		
					for (var i=categoryList.length-1; i>=0; --i )
					{
						selectCategory.options[i]=new Option(categoryList[i], i, true, false);
					}
					
					sizeOfCats = selectCategory.options.length;
					selectCategory.options[sizeOfCats]=new Option("Select", sizeOfCats, true, true);
					
				}
			}
				
			Array.prototype.unique = function()
			{
				var r = new Array();
				o:for(var i = 0, n = this.length; i < n; i++)
				{
					for(var x = 0, y = r.length; x < y; x++)
					{
						if(r[x]==this[i])
						{
							continue o;
						}
					}
					r[r.length] = this[i];
				}
				return r;
			}
			
			function clearSelect()
			{
				selectQuestion.options.length = 0;
			}
			
			function loadSelectQuestion()
			{
				questions = [];
				theAnswer.innerHTML="";
				var theCategory = selectCategory.options[selectCategory.selectedIndex].text;
				if(theCategory != "Select")
				{
					divSelectQuestion.innerHTML = "<p>Select a Question:</p><select id=\"selectQuestion\" onchange=\"loadAnswer()\"></select><br/><br/>";
					var x=xmlDoc.getElementsByTagName("QUES");
					for (i=0;i<x.length;i++)
					{
						aCategory = x[i].getElementsByTagName("CAT")[0].childNodes[0].nodeValue;
			
						if(aCategory == theCategory)
						{
							aQuestion = x[i].getElementsByTagName("Q")[0].childNodes[0].nodeValue;
							questions.push(aQuestion);
							for (var j=questions.length-1; j>=0; --j )
							{
								selectQuestion.options[j]=new Option(questions[j], j, true, false)
							}
						}
						else
						{
			
						}
					}
				
				sizeOfQues = selectQuestion.options.length;
				selectQuestion.options[sizeOfQues]=new Option("Select", sizeOfQues, true, true);
		
				}
				else
				{
					divSelectQuestion.innerHTML = "";
				}
			}
			
			function loadAnswer()
			{
				var theQuestion = selectQuestion.options[selectQuestion.selectedIndex].text;
				var x=xmlDoc.getElementsByTagName("QUES");
				for (i=0;i<x.length;i++)
				{
					aQuestion = x[i].getElementsByTagName("Q")[0].childNodes[0].nodeValue;
		
					if(aQuestion == theQuestion)
					{
						anAnswer = x[i].getElementsByTagName("A")[0].childNodes[0].nodeValue;
						theAnswer.innerHTML = "Answer:<br/><br/>" + anAnswer + "<br/><br/>";
					}
				}
			}
			
		</script>

thanks for your time.

[chanshaw]

Ok I tried some more debugging

After doing some more debugging I tried to tune the code a little

		<script type="text/javascript">
			var categories = new Array();
			var questions = new Array();
			var xmlDoc=null;
			var firstTime;
			var sizeOfCats;
			var sizeOfQues;
			
			function readFile()
			{
				if (xmlDoc!=null)
				{
					var x=xmlDoc.getElementsByTagName("QUES");
					for (i=0;i<x.length;i++)
					{
						t = x[i].getElementsByTagName("CAT")[0].childNodes[0].nodeValue;
						categories.push(t);
					}
					var categoryList = categories.unique();
		
					for (var i=categoryList.length-1; i>=0; --i )
					{
						selectCategory.options[i]=new Option(categoryList[i], i, true, false);
					}
					
					sizeOfCats = selectCategory.options.length;
					selectCategory.options[sizeOfCats]=new Option("Select", sizeOfCats, true, true);
					
				}

			}
			
			function startup()
			{
				divSelectCategory.innerHTML = "<select id=\"selectCategory\" onchange=\"loadSelectQuestion()\"></select>";

				if (window.ActiveXObject)
				{
					xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
					xmlDoc.async=false;
					xmlDoc.load("XML/faq.xml");
					readFile();
				}
				else if (document.implementation.createDocument)
				{ 					
 					xmlDoc = document.implementation.createDocument("", "", null);
  					xmlDoc.onload = readFile();
 					xmlDoc.load("XML/faq.xml");
				}
				else
				{
					alert('Your browser cannot handle this script');
				}
			}
				
			Array.prototype.unique = function()
			{
				var r = new Array();
				o:for(var i = 0, n = this.length; i < n; i++)
				{
					for(var x = 0, y = r.length; x < y; x++)
					{
						if(r[x]==this[i])
						{
							continue o;
						}
					}
					r[r.length] = this[i];
				}
				return r;
			}
			
			function clearSelect()
			{
				selectQuestion.options.length = 0;
			}
			
			function loadSelectQuestion()
			{
				questions = [];
				theAnswer.innerHTML="";
				var theCategory = selectCategory.options[selectCategory.selectedIndex].text;
				if(theCategory != "Select")
				{
					divSelectQuestion.innerHTML = "<p>Select a Question:</p><select id=\"selectQuestion\" onchange=\"loadAnswer()\"></select><br/><br/>";
					var x=xmlDoc.getElementsByTagName("QUES");
					for (i=0;i<x.length;i++)
					{
						aCategory = x[i].getElementsByTagName("CAT")[0].childNodes[0].nodeValue;
			
						if(aCategory == theCategory)
						{
							aQuestion = x[i].getElementsByTagName("Q")[0].childNodes[0].nodeValue;
							questions.push(aQuestion);
							for (var j=questions.length-1; j>=0; --j )
							{
								selectQuestion.options[j]=new Option(questions[j], j, true, false)
							}
						}
						else
						{
			
						}
					}
				
				sizeOfQues = selectQuestion.options.length;
				selectQuestion.options[sizeOfQues]=new Option("Select", sizeOfQues, true, true);
		
				}
				else
				{
					divSelectQuestion.innerHTML = "";
				}
			}
			
			function loadAnswer()
			{
				var theQuestion = selectQuestion.options[selectQuestion.selectedIndex].text;
				var x=xmlDoc.getElementsByTagName("QUES");
				for (i=0;i<x.length;i++)
				{
					aQuestion = x[i].getElementsByTagName("Q")[0].childNodes[0].nodeValue;
		
					if(aQuestion == theQuestion)
					{
						anAnswer = x[i].getElementsByTagName("A")[0].childNodes[0].nodeValue;
						theAnswer.innerHTML = "Answer:<br/><br/>" + anAnswer + "<br/><br/>";
					}
				}
			}
			
		</script>

Now this works in IE but in firefox it doesn't...
the error the error console gives is

Error: divSelectCatego ry is not defined
Source File: file:///C:/Users/Administrator/Desktop/CRC/crcFAQ.html
Line: 42

Anyways hope that helps you to help me :D

[RamananKalirajan]

Hi i think the problem may be in the line

  xmlDoc.onload = readFile(); 
  xmlDoc.load("XML/faq.xml");

Can you please check on this.

Regards
Ramanan Kalirajan

[acoder]

The problem is line 35. divSelectCatego ry hasn't been defined anywhere.

[chanshaw]

Hi i think the problem may be in the line

  xmlDoc.onload = readFile(); 
  xmlDoc.load("XML/faq.xml");

Can you please check on this.

Regards
Ramanan Kalirajan

No that part seems to be working (as far as I can see)

[chanshaw]

The problem is line 35. divSelectCatego ry hasn't been defined anywhere.

In my html I have a div with the id divSelectCatego ry, shouldnt that mean it's defined? (new to javascript sorry)

[acoder]

No. You need to access it with:

document.getElementById("divSelectCategory")

[chanshaw]

No. You need to access it with:

document.getElementById("divSelectCategory")

oh duh, thanks so much! :D

[acoder]

No problem. Glad it's working :)