Learn VBA & Macros in 1 Week!

JavaScript - Beginning Dom

Full Excel VBA Course - Beginner to Expert

Beginning Dom	View Content

Hi,

I'm new to programming with the DOM and new to this forum as well. I have the code below showing a web page that is simply trying to alert the user of recognized DOM nodes. I am not getting the bodyElement or textElement to be recognized by the browser. The error states that "an object is required."

Code:

<html>
<head>

<title>Trickier nesting, still</title>

<script language="JavaScript" type="text/javascript">

      var myDocument = document;
      var htmlElement = myDocument.documentElement;

      alert(htmlElement.nodeName);

      var headElement = htmlElement.getElementsByTagName("head")[0];

      alert(headElement.nodeName);

      var titleElement = headElement.getElementsByTagName("title")[0];

      var bodyElement = headElement.nextSibling;

      var textElement = titleElement.firstChild;

      alert(titleElement.nodeName);
      alert(bodyElement.nodeName);
      alert(textElement.nodeValue);

   

  </script>


  
</head>
<body>
  <div id="main-body">
   <div id="contents">
    <table>
     <tr><th>Steps</th><th>Process</th></tr>
     <tr><td>1</td><td>Figure out the <em>root element</em>.</td></tr>
     <tr><td>2</td><td>Deal with the <span id="code">head</span> first,
         as it's usually easy.</td></tr>
     <tr><td>3</td><td>Work through the <span id="code">body</span>.
         Just <em>take your time</em>.</td></tr>
    </table>
   </div>
   <div id="closing">
    This link is <em>not</em> active, but if it were, the answers
    to this <a href="answers.html"><img src="exercise.gif" /></a> would
    be there. But <em>do the exercise anyway!</em>
   </div>
  </div>
</body>
</html>

Full Excel VBA Course - Beginner to Expert

Site For Beginning Javascript

Similar Tutorials

View Content

I took a class with just a little bit of JavaScript in it and didn't learn as much as I'd hoped. Is there a website that walks through JavaScript that easy to understand?
Thanks

Beginning Of A Matching Picture Game

Similar Tutorials

View Content

Hello!

I'm in need to be able to create a matching picture game, in which I have rougly 9 images to be able to match, but 18 in total. I have started with a thought of having a button that; when pressed it will disappear and show the image that is within the function.

Progress; I am able to press the button and let the image load, but in this case everything goes fine (image resized, not sure about the id though) but the image doesn't show, it just shows an [X]
yet when I just put
Code:

<script language="Javascript" type="text/javascript">
function callImage(){
document.write("<img src=\"images/truck0.jpg">")
}
</script>

The function works fine when I press the button.
Any tips? Thank you!

Full Code so Far:

Code:

<head>
<script language="Javascript" type="text/javascript">
function callImage(){
document.write("<img src=\"images/truck0.jpg id=\"pic\" width=\"150\" height=\"150\">")
}
</script>
</head>
<body>
<form>
<input type="button" value="Display" onClick="callImage()"/>
</form>
</body>

Placing Symbols At The Beginning And End Of Words

Similar Tutorials

View Content

I have the 10000th word and I want to put the this symbols [ and this ] the beginning and end of words .. so my question is .. how do I put the symbol is simultaneously the 10000th word that is .. there is not any program that can do such ... please help .. example :

[can]
[you]
[me]
[and]
[ask]
[google]
[yahoo]
[and over 10000 ++ more]

Need Help With Beginning Javascript Code For Window.confirm() Function

Similar Tutorials

View Content

I am having some difficulty in constructing a window.confirm() function that works with my code. So if the form data is valid, I need to use a window.confirm() dialog box to show the user's total cost based on the rental rate of equipment chosen and the reservation period. The user must accept the cost by pressing the confirm button, and if user cancels do not submit data. I have written this code but cannot figure out how to find the number of days from the 2 date fields and use that to calculate and display the total cost. Any help with this will be greatly appreciate. Thanks so much.

[This is the part I am having trouble with:]

//confirm submit and display rental cost
Code:

			 	var equip = document.forms[0].equipment.value
				var pDate = document.forms[0].pickupDate.value
				var pHours = document.forms[0].pickupHours.value
				var pMinutes = document.forms[0].pickupMinutes.value
				var rDate = document.forms[0].returnDate.value
				var rHours = document.forms[0].returnHours.value
				var rMinutes = document.forms[0].returnMinutes.value
				
				var pTime = pHours + pMinutes
				var rTime = rHours + rMinutes
				
				var total = (((rDate - pDate) - 1) * 24) * equip) + ((rTime + (24 - pTime)) * equip)
		
				function confirmSubmit() {
				var submitForm = window.confirm("'The total rental cost is: ' + total");
				if (submitForm == true) 
					return true;
					return false;
				}

[Below is the code I have so far:]
Code:

<!DOCTYPE html PUBLIC
	"-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- Brooks Rogalski
		December 6, 2010 -->
<title>ABC Outdoor Sports</title>
<meta http-equiv="content-type"
	content="text/html; charset=iso-8859-1" />
	
	<script type = "text/javascript">
		/* <![CDATA[ */
		
			//image slideshow function
			
			var interval = 4000; // delay between rotating images
			var random_display = 1; // 0 = no, 1 = yes
			var pause = false;
			var image_index = 0;
			
			image_list = new Array();
			image_list[image_index++] = new imageItem("fishing.jpg");
			image_list[image_index++] = new imageItem("biking.jpg");
			image_list[image_index++] = new imageItem("climbing.jpg");
			image_list[image_index++] = new imageItem("kayaking.jpg");
			image_list[image_index++] = new imageItem("scuba.jpg");
			
			var number_of_image = image_list.length;
			
			function imageItem(image_location) {
			
				this.image_item = new Image();
				this.image_item.src = image_location;
			}
			
			function get_ImageItemLocation(imageObj) {
				return(imageObj.image_item.src)
			}

			function generate(x, y) {
			
				var range = y - x + 1;
				return Math.floor(Math.random() * range) + x;
			}

			function getNextImage() {
				if (pause == true) return;
				
				if (random_display) {
					image_index = generate(0, number_of_image-1);
				}
				else {
					image_index = (image_index+1) % number_of_image;
				}
				
				var new_image = get_ImageItemLocation(image_list[image_index]);
				return(new_image);
			}

			function rotateImage(place) {
				
				var new_image = getNextImage();
				
				document[place].src = new_image;
				
				var recur_call = "rotateImage('"+place+"')";
				
				setTimeout(recur_call, interval);
			}

			
				
			//validate form functions
			
			function validateForm() {
			
				var valid = true;
				
				//validate equipment 
				
				if (document.forms[0].equipment.selectedIndex == 0) {
					window.alert("Please select your equipment type.");
					document.forms[0].equipment.focus();
					return false;
				}
				
				//validate pick-up date
			
				if (document.forms[0].pickupDate.value == "'' || '(mm/dd/yyyy)'" ) {
					window.alert("Please enter your Pick-up Date.");
					document.forms[0].pickupDate.focus();
					valid = false;
					return valid;
				}
				
				today = new Date();
				year = today.getFullYear() ;
				month = today.getMonth();
				day = today.getDate();
				
				//validate pickup date format
				
				var re =/^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{2,4}$/
	
				if(document.forms[0].pickupDate.value != '' && 		!document.forms[0].pickupDate.value.match(re)) { 
					window.alert("Invalid date format: " + document.forms[0].pickupDate.value); 
					document.forms[0].pickupDate.focus();
					valid=false;
					return valid;
				}
	
				var date;
				var input2=document.forms[0].pickupDate.value;
				var cyear = parseInt(input2.substring(6,10));
				var cmonth = parseInt(input2.substring(0,2)) - 1;
				var cday = parseInt(input2.substring(3,5));
	
				if ( month < cmonth ){
					date = year - cyear - 1;
				}
				else if ( month < cmonth ){
					date = cyear - year;
				}
				else if ( month == cmonth ){
					if ( cday < day ){
						date = cyear - year - 1;
					}
					else if ( day > cday ){
						date= cyear - year;
					}
					else if ( day == cday ){
						date = cyear - year-1;
					}
				}
	
				if(date < 2){
					window.alert('Must be atleast 2 days from today');
					valid=false;
					return valid;
				}
				
				//validate pick-up time hours
				
				if (document.forms[0].pickupHours.selectedIndex == 0) {
					window.alert("Please select the number of hours for pick-up time.");
					document.forms[0].pickupHours.focus();
					return false;
				}
				
				//validate pick-up time minutes
				
				if (document.forms[0].pickupMinutes.selectedIndex == 0) {
					window.alert("Please select the number of minutes for pick-up time.");
					document.forms[0].pickupMinutes.focus();
					return false;
				}
				
				//validate return date
			
				if (document.forms[0].returnDate.value == "'' || '(mm/dd/yyyy)'" ) {
					window.alert("Please enter your Return Date.");
					document.forms[0].returnDate.focus();
					valid = false;
					return valid;
				}
				
				//validate return date format
				
				if(document.forms[0].returnDate.value != '' && !document.forms[0].returnDate.value.match(re)) { 
					window.alert("Invalid date format: " + document.forms[0].returnDate.value); 
					document.forms[0].returnDate.focus();
					valid=false;
					return valid;
				}
	
				if(document.forms[0].returnDate.value <= document.forms[0].pickupDate.value){
					window.alert("Please choose later date");
					valid=false;
					return false;
				}
				
				//validate return time hours
				
				if (document.forms[0].returnHours.selectedIndex == 0) {
					window.alert("Please select the number of hours for return time.");
					document.forms[0].returnHours.focus();
					return false;
				}
				
				//validate return time minutes
				
				if (document.forms[0].returnMinutes.selectedIndex == 0) {
					window.alert("Please select the number of minutes for return time.");
					document.forms[0].returnMinutes.focus();
					return false;
				}
				
				//validate first name
			
				if (document.forms[0].firstName.value=="") {
					window.alert("Please enter your first name.");
					document.forms[0].firstName.focus();
					valid = false;
					return valid;
				}
				
				//validate last name
			
				if (document.forms[0].lastName.value=="") {
					window.alert("Please enter your last name.");
					document.forms[0].lastName.focus();
					valid = false;
					return valid;
				}
				
				//validate street address
			
				if (document.forms[0].street.value=="") {
					window.alert("Please enter your street address.");
					document.forms[0].street.focus();
					valid = false;
					return valid;
				}
				
				//validate city
			
				if (document.forms[0].city.value=="") {
					window.alert("Please enter your city.");
					document.forms[0].city.focus();
					valid = false;
					return valid;
				}
				
				//validate zip code
				
				if (document.forms[0].zip.value==""){
					window.alert("Please enter your zip code.");
					document.forms[0].zip.focus();
					valid=false;
					return valid;
				}
	
				var re5digit=/^\d{5}$/ 
	
				if (document.forms[0].zip.value.search(re5digit)==-1){ 
					window.alert("Please enter a 5 digit number")
					valid=false;
					return valid;
				}
				
				//validate date of birth
				
				if (document.forms[0].date.value == "'' || '(mm/dd/yyyy)'" ){
					window.alert("Please enter your date of birth.");
					document.forms[0].birthDate.focus();
					valid=false;
					return valid;
				}
				
				var reDateFormat = /^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{4}$/
				
				if(document.forms[0].date.value.search(reDateFormat)==-1){
					window.alert("Please enter a standard format. [mm/dd/yyyy]")
					valid=false;
					return valid;
				}
				
				//check if over 18
				
				var age;
				var input = document.forms[0].birthDate.value;
				var pyear = parseInt(input.substring(6,10));
				var pmonth = parseInt(input.substring(0,2)) - 1;
				var pday = parseInt(input.substring(3,5));
	
				if ( month < pmonth ){
					age = year - pyear - 1;
				}
				else if ( month > pmonth ){
					age = year - pyear;
				}
				else if ( month == pmonth ){
					if ( day < pday ){
						age = year - pyear - 1;
					}
					else if ( day > pday ){
						age = year - pyear;
					}
					else if ( day == pday ){
						age = year - pyear;
					}
				}
				if(age < 18){
					window.alert('Attention: Under 18!');
					valid=false;
					return valid;
				}	
				
				//confirm submit and display rental cost
			
			 	var equip = document.forms[0].equipment.value
				var pDate = document.forms[0].pickupDate.value
				var pHours = document.forms[0].pickupHours.value
				var pMinutes = document.forms[0].pickupMinutes.value
				var rDate = document.forms[0].returnDate.value
				var rHours = document.forms[0].returnHours.value
				var rMinutes = document.forms[0].returnMinutes.value
				
				var pTime = pHours + pMinutes
				var rTime = rHours + rMinutes
				
				var total = (((rDate - pDate) - 1) * 24) * equip) + ((rTime + (24 - pTime)) * equip)
		
				function confirmSubmit() {
				var submitForm = window.confirm("'The total rental cost is: ' + total");
				if (submitForm == true) 
					return true;
					return false;
				}
				
				
			}
			
			
			
			
		/* ]]> */
	</script>

</head>
<body onload = "rotateImage('rImage')">

	<h1> ABC Outdoor Sports Equipment </h1>

	
	<img src="fishing.jpg" id="rImage" width="250" height="200" onmouseover = "pause=true;" onmouseout = "pause=false;"> 
	
	<br/>
	<br/>
	
	<form onsubmit = "return validateForm();" action = "mailto:rogalskibf@gmail.com?subject=ABC Customer Reservation" method="post" enctype="text/plain">
		<table border = "0">
			<tr>
				<td>
					Equipment:<br/>
					<select name = "equipment">
						<option value="unselected">Select Equipment Type</option>
						<option value = 20>Fishing Boat</option>
						<option value = 15>Kayak</option>
						<option value = 2>Mountain Bike</option>
						<option value = 10>Scuba Gear</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					Pick-up Date: <br/>
					<input type = "text" name = "pickupDate" value = "(mm/dd/yyyy)"/>
				</td>
				<td>
					Pick-up Time: <br/>
					<select name = "pickupHours">
						<option value="unselected">hr</option>
						<option value = 7>07</option>
						<option value = 8>08</option>
						<option value = 9>09</option>
						<option value = 10>10</option>
						<option value = 11>11</option>
						<option value = 12>12</option>
						<option value = 13>13</option>
						<option value = 14>14</option>
						<option value = 15>15</option>
						<option value = 16>16</option>
						<option value = 17>17</option>
					</select>

					<select name = "pickupMinutes">
						<option value="unselected">min</option>
						<option value = 0>00</option>
						<option value = .5>30</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					Return Date: <br/>
					<input type = "text" name = "returnDate" value = "(mm/dd/yyyy)"/>
				</td>
				<td>
					Return Time: <br/>
					<select name = "returnHours">
						<option value="unselected">hr</option>
						<option value = 7>07</option>
						<option value = 8>08</option>
						<option value = 9>09</option>
						<option value = 10>10</option>
						<option value = 11>11</option>
						<option value = 12>12</option>
						<option value = 13>13</option>
						<option value = 14>14</option>
						<option value = 15>15</option>
						<option value = 16>16</option>
						<option value = 17>17</option>
					</select>
					
					<select name = "returnMinutes">
						<option value="unselected">min</option>
						<option value = 0>00</option>
						<option value = .5>30</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					First Name: <br/>
					<input type = "text" name = "firstName"/>
				</td>
				<td>
					Last Name: <br/>
					<input type = "text" name = "lastName"/>
				</td>
			</tr>
			<tr>
				<td>
					Street: <br/>
					<input type = "text" name = "street"/>
				</td>
				<td>
					City: <br/>
					<input type = "text" name = "city"/>
				</td>
				<td>
					Zip:<br/>
					<input type = "text" name = "zip" maxlength = "5"/>
				</td>
			</tr>
			<tr>
				<td>
					Date of Birth: <br/>
					<input type = "text" name = "date" value = "(mm/dd/yyyy)"/>
				</td>
			</tr>
			<tr>
				<td colspan = "3" align = "center">
					<input type = "submit" name = "submit" value = "Submit Reservation"/>
				</td>
			</tr>
		</table>
	</form>


</body>
</html>