Trouble with using javascript

Hello everyone, I am excited to have researched and join a community of talented web designers. Currently, I am a student at a local college, studying for a AS in Internet Services Technology. The web design course I am taking is an online only course, where the professor is an off campus professor who teaches a University in the same city. Therefore, any trouble I run into, I have to post to the schools online campus web page or send in a email through the web page. Which requires waiting for a response. So I decided to join a community. I believe here, I can learn a lot, and seek advice when running into a road block. Another way of getting advice which increases my chance of an immediate response. Also, with my Art background (A.A. in Art Studio) perhaps I can give some ideas when needed.

On my current assignment, we are coding a web page that uses a slide show using javascript. I have coded my page exactly like the course designer illustrated via pdf file. But the page is still not working. I was wondering if someone could take a look at the code and maybe tell me what’s wrong.

I greatly appreciate all who have taken the time to read, and who are able to view and critique the code I did for the current assignment.

Thanks!

<?xml version= "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type= "text/javascript" language= "JavaScript">
var animalsSlides = new Array();
animalSlides[0] = new Image();
animalSlides[1] = new Image();
animalSlides[2] = new Image();
animalSlides[3] = new Image();
animalSlides[4] = new Image();
animalSlides[5] = new Image();

animalSlides[0].src= "images/bison_walk.jpg";
animalSlides[1].src= "images/bison_sits.jpg";
animalSlides[2].src= "images/deer_baby.jpg";
animalSlides[3].src= "images/deer1.jpg";
animalSlides[4].src= "images/deer_face.jpg";
animalSlides[5].src= "images/birds1.jpg";

var theCaptions = new Array();
theCaption[0] = "Out for a stroll";
theCaption[1] = "Keeping warm by a geyser";
theCaption[2] = "A baby deer";
theCaption[3] = "Mom is looking for her baby";
theCaption[4] = "But big sister is looking at you";
theCaption[5] = "Beautiful bathing birds";

var slidenum = 0;
var totalslides = animalSlides.length-1;
function showSlide(direction)
{
	  if (direction == "next")
	  {
	  (slidenum == totalslides) ? slidenum =0 : slidenum ++;
	  }
	  else
	  {
	  (slidenum == 0) ? slidenum = totalslides : slidenum --;
	  }
	if (document.images)
	  {
	  document.slideframe.src = animalSlides[slidenum].src;
	  document.slidecontrols.caption.value =
			theCaptions[slidenum];
	  document.slidecontrols.theslide.value = slidenum+1;
	}
}
</script>
<title>My Slide Show</title>
</head>
<body>
<!-- open the form here and name it "slidecontrols" -->
<form name="slidecontrols">
<table width="750" align="center" border="0">
<tr><td>
	<h3>The Wild Animal Slide Show</h3>
</td></tr>
<tr><td>
	<img src="images/bison_walk.jpg" name= "slideframe" width= "240"
	height= "160" alt= "slide show" />
	<p><textarea name= "caption" rows= "2" cols= "50"> Our slide
	show begins with a bison out for a stroll in Montana.
	</textarea><br>
	<input type= "button" value= "Previous slide" onclick= "showSlide ('previous');">
	<input type= "button" value= "Nest slide" onclick= "showSlide
	('next');">
	Slide Number:
	<input type= "text" value= "1" name= "theslide" size= "5"></p>
</td></tr>
</table>
</form>
</body>
</html>

1, get rid of the antiquated language=javascript" that was removed from HTML over 15 years ago.

  1. You can define an array using instead of new Array()

  2. Rather than defining the array entries separately define then in the statement that defines the array

  3. JavaScript goes at the bottom of the page just before the </body> tag.

  4. If you wrap your JavaScript inside an anonymous function then it will not interfere with any other scripts added to the same page.

  5. JavaScript declares all variables at the start of the scope they are in so your code will more closely reflect how JavaScript actually works if you use only one var statement at the very top and specify all of your variables as a comma separated list.

  6. The latest JavaScript has a “use strict”; command that you place at the top of your code to identify that your script was written after 2011. Most browsers will then apply the new JavaScript rules that make it easier to test your code (such as telling you at the start if you forgot to declare a variable before trying to use it.

  7. You have JavaScript jumbled with your HTML. The JavaScript onclick calls are better placed with the rest of your JavaScript rather than being embedded in the HTML. With the script at the bottom where it belongs they can be easily attached into the HTML by giving the HTML tag it needs to be attached to an id.

As for why your script isn’t working - you defined an array called animalsSlides that you don’t use and then try to add entries to a non existent array called animalSlides. Something that wouldn’t have been able to happen if you created and populated the array in a single command.

Errors such as this are easy to find if you use the JavaScript debugger built into all browsers except Firefox.

Thanks felgall! The site now works! Thanks again!