Solved

x.textContent error

Posted on 2014-07-21
5
144 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

707 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