cannot load data from xml file, html not affected

[Iashalth]

my ajax function is triggered on window.load but it doesn't affect html at all. Here's my ajax:

function titleTopic(url)
{
var xmlhttp;
var txt,txt2,xxx,xx,x;
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)
    {
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("ARTICLE");

      xx=x[0].getElementsByTagName("TITLE");
	  txt=xx[0].firstChild.nodeValue;
	  xxx=x[0].getElementsByTagName("AUTHOR");
	  txt2=xxx[0].firstChild.nodeValue;


    document.getElementByTagName('h3').innerHTML=txt;
	document.getElementByTagName('span').innerHTML=txt2;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

[Rabbit]

How do you know it triggers?

On line 25 and 26, it's getElementsByTa gName, not getElementByTag Name.

[Iashalth]

Yeah ive changed the code but it still doesn't work, ive runthe website on google console and the errors ive got are
Uncaught SyntaxError: Unexpected end of input for line 1 of moje.js
Uncaught ReferenceError: process is not defined for line 71 of webdesign.html which is basically the button with process() function

So it's basically the first line of my javascript file: var xmlHttp = createXmlHttpRe questObject();
and then a button that triggers my function in html

my full ajax:

var xmlHttp = createXmlHttpRequestObject();

//create object
function createXmlHttpRequestObject() {
	var xmlHttp;
	if (window.XMLHttpRequest){
		xmlHttp = new XLHttpRequest();
	} else {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xmlHttp;
}

//called onload

function process() {
	if(xmlHttp) {
		try{
			xmlHttp.open("GET", "C:/xampp/htdocs/webdesign.xml", true);
			xmlHttp.onreadystatechange = handleStateChange;
			xmlHttp.send(null);
		}
		catch(e) {
			alert(e.toString());
		}
}

//when state changes
function handleStateChanges() {
	if (xmlHttp.readyState==4) {
		if(xmlHttp.status==200) {
			try {
				handleResponse();
				
			}
			catch(e) {
				alert(e.toString());
			}
		} else {
			alert(xmlHttp.statusText);
		}
	}
}
 //handle the response from the server
 function handleResponse() {
	var xmlResponse = xmlHttp.responseXML;
	root = xmlResponse.documentElement;
	articles = root.getElementsByTagName("TITLE");
	authors = root.getElementsByTagName("AUTHOR");
	
	var stuff = "";
	for (var i=0; i<articles.length; i++) {
		stuff = articles.item(i).firstChild.data + " - " + authors.item(i).firstChild.data + "<br/>";
		
	}
	super2 = document.getElementByID("super2");
	super2.innerHtml = stuff;
 }

and the mentioned html

		<article id='super2'>
		<button onclick="process()">Get XML data</button>

		</article>

[Rabbit]

The first error that jumps out at me is that on line 7 of your javascript code block, XLHttpRequest should be XMLHttpRequest

[Iashalth]

oh you're right, fixed it but it still doesn't work
I'm using xampp but ajax is just ignored other javascript works just fine.
Still im getting the same error from the console
Uncaught ReferenceError: process is not defined webdesign.html: 71
onclick

[Iashalth]

ok, i kind of made stupid mistake and fixed it, i lacked one curly bracket that's it and started getting error alerts
but i get an error from xml I found it and fixed it but it's still the same:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<RESPONSE>
	<TOPICS>
		<ARTICLE>
			<TITLE>The Lean UX Manifesto: Principle-Driven Design</TITLE>
			<AUTHOR>Anthony Viviano</AUTHOR>
			<YEAR>2014</YEAR>
			<TEXT>My colleague Ajay and I have been working at incorporating lean UX at the enterprise level for over two years. In studying it, I find that there is a temptation to lay down rules, and if the rules arent followed. well, then, you cant call it lean UX. At the end of the day, though, some lean UX is better than none.</TEXT>
		</ARTICLE>
		<ARTICLE>
			<TITLE>Killer Responsive Layouts With CSS Regions</TITLE>
			<AUTHOR>CJ Gammon</AUTHOR>
			<YEAR>2013</YEAR>
			<TEXT>As Web designers, we are largely constrained by the layout features available to us. Content placed inside a container will often naturally extend the container vertically, wrapping the content. If a design requires elements to remain a certain height, then our options are limited. In these cases, we can only add a scroll bar or hide the overflow. The CSS Regions specification provides a new option.</TEXT>
		</ARTICLE>
		<ARTICLE>
			<TITLE>Original And Innovative Web Layouts</TITLE>
			<AUTHOR>Shavaughn Haack</AUTHOR>
			<YEAR>2013</YEAR>
			<TEXT>The layout is the foundation of your website. It guides the user through the sections and tells them what is most important. It also sets the aesthetic of the website. Therefore, you need to carefully think through how you lay out content.</TEXT>
		</ARTICLE>
	</TOPICS>
</RESPONSE>

XML Parsing Error: mismatched tag. Expected: </AUTHOR>. Location: moz-nullprincipal:{ b3ef63a7-15a2-4c24-8903-7e94bdda5807} Line Number 16, Column 5:

</ARTICLE>
------------------^

Probably it's a stupid mistake too oh well..

Thx for your help anyway

[Iashalth]

it just hasn't updated the file, i fixed it but it's still not displaying anything

[Rabbit]

Where is the code getting stuck at now? And what's your newly modified code? It sounds like you made more than a few changes.

[Iashalth]

ok fixed it, i just needed a monologue i guess xD

[Rabbit]

Can you post your final solution? In case someone else runs into the same issue and stumbles upon this thread.

[Iashalth]

They were mostly typos of methods and one essential bracket was missing, final version:

var xmlHttp = createXmlHttpRequestObject();

//create object
function createXmlHttpRequestObject() {
	var xmlHttp;
	if (window.XMLHttpRequest){
		xmlHttp = new XMLHttpRequest();
	} else {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xmlHttp;
}

//called onload

function process() {
	if(xmlHttp) {
		try{
			xmlHttp.open("GET", "webdesign1.xml", true);
			xmlHttp.onreadystatechange = handleStateChange;
			xmlHttp.send(null);
		}
		catch(e) {
			alert(e.toString());
		}
}

//when state changes
function handleStateChange() {
	if (xmlHttp.readyState==4) {
		if(xmlHttp.status==200) {
			try {
				handleResponse();
				
			}
			catch(e) {
				alert(e.toString());
			}
		} else {
			alert(xmlHttp.statusText);
		}
	}
}
 //handle the response from the server
 function handleResponse() {
	var xmlResponse = xmlHttp.responseXML;
	root = xmlResponse.documentElement;
	articles = root.getElementsByTagName("TITLE");
	authors = root.getElementsByTagName("AUTHOR");
	
	var stuff = "";
	for (var i=0; i<articles.length; i++) {
		stuff = "<p>" + articles.item(i).firstChild.data + " - " + authors.item(i).firstChild.data + "</p>";
		
	}
	super2 = document.getElementById("super2");
	super2.innerHTML = stuff;
 }
 
}