Solved

x.textContent error

Posted on 2014-07-21
5
141 Views
Last Modified: 2014-07-21
I have a js file and I'm playing around with object literals but it's not working.

Any ideas why?

Thanks!
0
Comment
Question by:Isaac
  • 3
  • 2
5 Comments
 
LVL 13

Expert Comment

by:duncanb7
ID: 40210575
From the information you provide, I think it is because x element  has error. If you can provide more x element information, it will assist to solve your issue.

Duncan
0
 
LVL 5

Author Comment

by:Isaac
ID: 40210581
The file was attached but here you go....

<!DOCTYPE html>
<html>

<head>
	<title></title>
	
	<script type="text/JavaScript">
		var hotel = {
			name: 'Sunset',
			rooms: 65,
			Booked: 15,
			checkAvailability: function() {
				return this.rooms - this.Booked;
			}
		};
		
		var elName = document.getElementById('hName');
		elName.textContent = hotel.name;
		
		var rmLeft = document.getElementById('hRoomLeft');
		rmLeft.textContent = hotel.checkAvailability();		
	</script>

</head>

<body>
	<table>
		<tr>
			<td>Hotel Availability</td>
		</tr>
		<tr>
			<td>Hotel: </td>
			<td><div id="hName"></div></td>
		</tr>
		<tr>
			<td>Rooms Left: </td>
			<td><div id="hRoomLeft"></div></td>
		</tr>				
	</table>
</body>
</html>

Open in new window

0
 
LVL 13

Accepted Solution

by:
duncanb7 earned 500 total points
ID: 40210612
it is because the html page is not loaded completely before javascript running,

 please try this by adding init() function with onload in body tag

Duncan
<!DOCTYPE html>
<html>

<head>
	<title></title>
	
	<script type="text/JavaScript">
	function init(){
		var hotel = {
			name: 'Sunset',
			rooms: 65,
			Booked: 15,
			checkAvailability: function() {
				return this.rooms - this.Booked;
			}
		};
		
		var elName = document.getElementById('hName');
		elName.textContent = hotel.name;
		
		var rmLeft = document.getElementById('hRoomLeft');
		rmLeft.textContent = hotel.checkAvailability();	
}		
	</script>

</head>

<body onload="javascipt:init();">
	<table>
		<tr>
			<td>Hotel Availability</td>
		</tr>
		<tr>
			<td>Hotel: </td>
			<td><div id="hName"></div></td>
		</tr>
		<tr>
			<td>Rooms Left: </td>
			<td><div id="hRoomLeft"></div></td>
		</tr>				
	</table>
</body>
</html>

Open in new window


Or you try this , change script location
<!DOCTYPE html>
<html>

<head>
	<title></title>


</head>

<body>
	<table>
		<tr>
			<td>Hotel Availability</td>
		</tr>
		<tr>
			<td>Hotel: </td>
			<td><div id="hName"></div></td>
		</tr>
		<tr>
			<td>Rooms Left: </td>
			<td><div id="hRoomLeft"></div></td>
		</tr>				
	</table>
		<script type="text/JavaScript">
		var hotel = {
			name: 'Sunset',
			rooms: 65,
			Booked: 15,
			checkAvailability: function() {
				return this.rooms - this.Booked;
			}
		};
		
		var elName = document.getElementById('hName');
		elName.textContent = hotel.name;
		
		var rmLeft = document.getElementById('hRoomLeft');
		rmLeft.textContent = hotel.checkAvailability();		
	</script>
</body>
</html>

Open in new window

0
 
LVL 5

Author Closing Comment

by:Isaac
ID: 40210631
Thanks! That's something I should have known.
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40210642
Thanks for your points

Have a nice day

Duncan
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now