JavaScript Object Test... What is Wrong?

**youssarian** · 02-15-2010 08:30 PM

The JavaScript library, project-1.js:

Code:

function Starship(Name,Length,Count,List){
  // Create the Starship class.
  this.name=Name;
  this.length=Length;
  this.numberConstructed=Count;
  this.nameOfConstructedShips=List;
  this.addConstructedShip=function(){
    this.numberConstructed++;
  }
  this.getRandomName=function(){
    alert(this.nameOfConstructedShips[Math.round(Math.random()*this.nameOfConstructedShips.length)]);
  }
}

// Now let's make them.
gal_list=new array("Enterprise","Yamato","Venture","Galaxy","Odyssey","Challenger");
int_list=new array("Intrepid","Voyager");

enterprise=new Starship("Galaxy",641,6,gal_list);
voyager=new Starship("Intrepid",334,2,int_list);

The XHTML document:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en">
<!-- This website is designed to conform with standards for XHTML 1.0 Strict. -->

<head>
<title>Objects</title>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />

<script type="text/javascript" src="project-1.js">
</script>

<style type="text/css">
</style>

</head>
<body>

<script type="text/javascript">
document.write(enterprise.length);
</script>

</body>
</html>

Can someone tell me the problem? It should work... but no browser I use appears to like objects. I get an error saying that "enterprise is undefined"

**khh** · 02-15-2010 10:58 PM

On line 16 and 17, it's supposed to be "new Array", not "new array". Javascript is case sensitive.

So this should work

Code:

function Starship(Name, Length, Count, List) {
	// Create the Starship class
	this.name = Name;
	this.length = Length;
	this.numberConstructed = Count;
	this.nameOfConstructedShips = List;
	this.addConstructedShip = function() {
		this.numberConstructed++;
	}
	this.getRandomName = function() {
		alert(this.nameOfConstructedShips[Math.round(Math.random()*this.nameOfConstructedShips.length)]);
	}
}

// Now let's make them.
gal_list = new Array("Enterprise", "Yamato", "Venture", "Galaxy", "Odyssey", "Challenger");
int_list = new Array("Intrepid", "Voyager");

enterprise = new Starship("Galaxy", 641, 6, gal_list);
voyager = new Starship("Intrepid", 334, 2, int_list);

**youssarian** · 02-15-2010 11:27 PM

You, good sir, have fixed a problem that has plagued me for quite a while. Now if I can only get object methods to work...

**youssarian** · 02-16-2010 02:01 AM

Another similar problem that I've been bumping into quite often.

The JavaScript library, project-1.js:

Code:

// -------- Constructor --------
function Racer(Which){
  // Create the Racer class, each of which is an opponent.
  this.name=Which;
  this.position=0;
  this.metal=0;
  this.energy=0;
}

// -------- Functions and Subroutines --------
function testMove(){
  playerMove=Math.round(Math.random()*20);
  player.position+=playerMove;
  playerIcon.style.pixelLeft+=playerMove;
}

// -------- Useful Variables --------
player=new Racer("player");

playerIcon=document.getElementsByTagName("img")[0];

And the XHTML document:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en">
<!-- This website is designed to conform with standards for XHTML 1.0 Strict. -->

<head>
<title>Project 1: RACE!</title>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />

<script type="text/javascript" src="project-1.js">
</script>

<style type="text/css">
  h1{
    text-align:center;
  }
  #player{
    background-color:red;
    width:500px;
    height:50px;
  }
  #player-icon{
    position:relative;
  }
</style>

</head>
<body>
<h1>Project 1: RACE!</h1>
<p>In this game, you attempt to reach the end of the track before the computer does. There are two resources (Metal and Energy) collected each turn which can be used to either speed you up or slow down the opponent.</p>
<div id="player">
  <img src="player.bmp" alt="" name="player-icon"/><br />
</div>
<input type="button" name="start" value="Start!" onclick="testMove()" />
</body>
</html>

The picture is supposed to advance upto 20 pixels every time I click the Start! button but it doesn't move, and playerIcon is undefined inside function testMove(). I tried making it a parameter for testMove() but that did no good.

**khh** · 02-16-2010 10:11 PM

This happens because the HTML site in not finised loading by the time your script is run, therefore when you use getElementByTagName() on the last line of the JS, the image tag hasn't been created yet, and therefore it doesn't return an object.

There are two simple ways to resolve this. The first is making sure the script is run after the image tag has been loaded, which you can get by putting the <script> tag below the image tag.

The other, much more elegant way is to place the getElementByTagName() in a function, and have that function load when the script is loaded. Javascript enabled browsers accept the "onload" argument on tags, so you could write this in the html

Code:

<img src="player1.bmp" alt="blah" onload="setPlayerObject(this)" />

and add this in the js

Code:

function setPlayerObject(obj) {
	playerIcon = obj;
}

and when the browser loaded the img element, playerIcon would be defined.

However, it is bothersome to have to set the onload in the HTML, therefore you can just do this

Code:

window.onload = function () {
	playerIcon=document.getElementsByTagName("img")[0];
}

The above function will run then the entire page is loaded. So if you have a large picture or something, it won't run until that's been loaded.

Also, you shouldn't use bmp for images. It's not supported in all browsers on all operating systems. If you want lossless images, use png.

**youssarian** · 02-16-2010 11:26 PM

There are two simple ways to resolve this. The first is making sure the script is run after the image tag has been loaded, which you can get by putting the <script> tag below the image tag.

Tried that. I could even see the pixelLeft property increase but the image itself wouldn't move.

The other, much more elegant way is to place the getElementByTagName() in a function, and have that function load when the script is loaded. Javascript enabled browsers accept the "onload" argument on tags, so you could write this in the html

Tried that, and again the pixelLeft property would increase but the image itself didn't move.

However, it is bothersome to have to set the onload in the HTML, therefore you can just do this

Ditto for the first two.

Also, you shouldn't use bmp for images. It's not supported in all browsers on all operating systems. If you want lossless images, use png.

I use AvancePaint instead of Microsoft Paint because, well, Microsoft Paint has somehow disappeared from my computer, and AvancePaint only allows files to be saved/loaded in BMP, JPG and GIF formats.

**khh** · 02-17-2010 12:37 AM

Originally Posted by youssarian

Tried that. I could even see the pixelLeft property increase but the image itself wouldn't move.

Well, that's because "pixelLeft" is your property. It doesn't mean anything to the browser, and therefore the browser doesn't act upon it. When I am looking for the right property, I use w3schools' css reference.

If you want to manipulate how it's shown in the browser, you must use the correct properties. In this case I think I'd have used something like

Code:

playerIcon.style.left = player.position+"px";

In order for that to work, you must have set position to relative, or something. So the whole JS:

Code:

// -------- Constructor --------
function Racer(Which){
	// Create the Racer class, each of which is an opponent.
	this.name=Which;
	this.position=0;
	this.metal=0;
	this.energy=0;
}

// -------- Functions and Subroutines --------
function testMove(){
	player.position+=Math.round(Math.random()*20);
	playerIcon.style.left=player.position+"px";
}

// -------- Useful Variables --------
player=new Racer("player");

window.onload = function () {
	playerIcon=document.getElementsByTagName("img")[0];
	playerIcon.style.position = "relative";
}

Also, why are you using the "name" attribute on the image? In xhtml it's only valid to use "id", except on form elements.
Also, if you want to write correct xhtml, w3's validator comes in handy. If you're using opera, just push Alt+Ctrl+Shift+U and it'll upload it automatically.

Originally Posted by youssarian

I use AvancePaint instead of Microsoft Paint because, well, Microsoft Paint has somehow disappeared from my computer, and AvancePaint only allows files to be saved/loaded in BMP, JPG and GIF formats.

Then use a program to convert it. Which you should anyway, paint produces crappy png images. At least do that when/if you release it.

**youssarian** · 02-17-2010 02:14 AM

I use w3schools' css reference.

So do I, actually. Although upon glancing, posLeft and pixelLeft don't appear to be covered...

Code:

playerIcon.style.left = player.position+"px";

Tried that... still won't move! It's odd, I forget how, but I managed to do something like this in school. Of course, that involved a setInterval() or setTimeout().

why are you using the "name" attribute on the image? In xhtml it's only valid to use "id", except on form elements.

Mental mix-up, caused by using getElementsByTagName.

if you want to write correct xhtml, w3's validator comes in handy.

Ah yes, I've had that bookmarked for a while. I've not done the validation because the document, which I want to upload to my website eventually, hasn't been made ready for uploading.

By the way,
Thank you for helping! Much more useful than Google!

**khh** · 02-17-2010 04:08 AM

Originally Posted by youssarian

So do I, actually. Although upon glancing, posLeft and pixelLeft don't appear to be covered...

That's because posLeft and pixelLeft aren't valid atributes at all. At least I've never heard of it.

Originally Posted by youssarian

Tried that... still won't move! It's odd, I forget how, but I managed to do something like this in school. Of course, that involved a setInterval() or setTimeout().

My code worked, but I'm guessing you omitted the playerIcon.style.position = "relative" because you thought "that's defined in the embed CSS anyway. But you see, since you used the "name" tag instead of the "id" tag in your HTML, the browser doesn't know that you want it to have the position: relative style on it. Therefore the .style.left property doesn't do anything. So if you change it from "name" to "id", it should work.

Originally Posted by youssarian

Ah yes, I've had that bookmarked for a while. I've not done the validation because the document, which I want to upload to my website eventually, hasn't been made ready for uploading.

I just validate as I write the page. It's so easy on Opera :p

edit: Also, you know that you can use document.getElementById("player-icon") instead of document.getElementByTagName("img")[0]? (Well, after you've changed it from "name" to "id", anyway).

**youssarian** · 02-17-2010 03:56 PM

posLeft and pixelLeft do indeed exist, but they're not well liked evidently.

I switched name to id. I'm really uptight about keeping myself in compliance with standards.

My history with using getElementById() has been a rocky one. Especially considering IE seems to have trouble with it.

It's telling me that playerIcon is undefined.

**khh** · 02-17-2010 05:07 PM

Originally Posted by youssarian

posLeft and pixelLeft do indeed exist, but they're not well liked evidently.

Well, as long as they're supported, that's what counts.

Originally Posted by youssarian

I switched name to id. I'm really uptight about keeping myself in compliance with standards.

Good

Originally Posted by youssarian

My history with using getElementById() has been a rocky one. Especially considering IE seems to have trouble with it.

I don't think I've ever had any problems with using the getElementById(), and I've made pages that works with IE6.

Originally Posted by youssarian

It's telling me that playerIcon is undefined.

Well, then either your browser is faulty or you're not doing what I'm suggesting. I see no other options. Try Copy-pasting the complete JS I posted earlier and see if it works. If it does, try finding out what the key difference between that and your JS if, if it doesn't try another browser (if you're on IE).

**youssarian** · 02-21-2010 08:26 PM

OK, so you can check to see if it does or doesn't work. Maybe I forgot to implement one of your solutions. I have it online here for you to check the source code and test it. (Only the Start! button will work, BTW.)

**khh** · 02-21-2010 10:57 PM

The problem is that you have body call setup() via the onload argument. Since setup doesn't exist, this holts the execution of the javascript.

**youssarian** · 02-22-2010 05:16 AM

I clearly do not deserve the computer technology credits I got from high school. Or I just need to be more observant.

**khh** · 02-22-2010 10:54 AM

Originally Posted by youssarian

I clearly do not deserve the computer technology credits I got from high school. Or I just need to be more observant.

You just need to learn how to use your browsers debug console.
In Opera it's Tools -> Advanced -> Error console (or something like that)
In Firefox it's Tools -> Error messages

It's usually very helpful in finding the problem.