Javascript/ XML tutorial code won't work

quinnd6 · 01-06-2016 9:34pm #1

I have been trying some code from a tutorial on youtube and it won't work.
It's supposed to display a business card when the page is loaded.
Instead it displays 2 buttons and nothing else.
Any ideas why it's not working?
Here's the code.

<!DOCTYPE html>
<html>
<head>
	<title>Business Card DOM Example 2</title>
	<script type="text/javascript">
	function populateFields(){
		var xmldata = document.getElementById("xmldata1");
		var bizCard = xmldata.getElementsByTagName("BusinessCard")[0];
		
		var name = bizCard.getElementsByTagName("Name")[0].firstChild.data;
		var phone1Str = bizCard.getElementsByTagName("Phone")[0].getAttribute("type") + ": ";
		var phone1 = bizCard.getElementsByTagName("Phone")[0].firstChild.data;
		var phone2Str = bizCard.getElementsByTagName("Phone")[1].getAttribute("type") + ": ";
		var phone2 = bizCard.getElementsByTagName("Phone")[1].firstChild.data;
		var phone3Str = bizCard.getElementsByTagName("Phone")[2].getAttribute("type") + ": ";
		var phone3 = bizCard.getElementsByTagName("Phone")[2].firstChild.data;
		var email = bizCard.getElementsByTagName("email")[0].firstChild.data;
		
		document.getElementById("Name").innerHtml = name;
		document.getElementById("phone1").innerHtml = phone1Str + phone1;
		document.getElementById("phone2").innerHtml = phone2Str + phone2;
		document.getElementById("phone3").innerHtml = phone3Str + phone3;
		document.getElementById("email").innerHtml = "email: " + email;		
	}
	
	window.addEventListener("load",populateFields);
	</script>
</head>
<body>
	<xml id="xmldata1" style="display:none">
		<BusinessCard>
			<Name>Joe Marini</Name>
			<phone type="mobile">(415) 555-4567</phone>
			<phone type="work">(000) 555-9876</phone>
			<phone type="fax">(510) 555-1234</phone>
			<email>joe@joe.com</email>
		</BusinessCard>
	</xml>
	<div class="BusinessCard">
			<div class="Name" id="Name"></div>
			<div class="phone" id="phone1"></div>
			<div class="phone" id="phone2"></div>
			<div class="phone" id="phone3"></div>
			<div class="email" id="email"></div>
	</div>
	<button id="hideEmail">Hide Email</button>
	<button id="showEmail">Show Email</button>
</body>
</html>

Hollister11 · 01-06-2016 11:40pm

Any link to the video, and I'll review the code for you.

terenurebob · 02-06-2016 8:23am

Use innerText instead of innerHtml as in:

document.getElementById("Name").innerText = name;

joe_joe · 02-06-2016 8:57am

its 'innerHTML' not 'innerHtml'
'innerText' also will work.

document.getElementById("Name").innerHTML = name;
document.getElementById("phone1").innerHTML= phone1Str + phone1;
document.getElementById("phone2").innerHTML= phone2Str + phone2;
document.getElementById("phone3").innerHTML= phone3Str + phone3;
document.getElementById("email").innerHTML= "email: " + email;

quinnd6 · 02-06-2016 4:18pm

Yes that's brilliant innerHTML did the trick.
Thanks joe_joe and thanks guys.

Javascript/ XML tutorial code won't work

Comments