Skip to main content

Return to Question

Improved formatting
Source Link
edit approved Jan 6, 2014 at 5:21
Dhanu Gurung
edit approved Jan 6, 2014 at 5:21
Dhanu Gurung
  • 8.9k
  • 11
  • 49
  • 61
<!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">
      var star = {}
      function the_stars() {}
      the_stars.prototype = {
        constellation: "test",
        x: 120,
        y: 120
      };
      function the_stars.set(c,xx,yy) { alert("called"); constellation=c; x=xx; y=yy; };
      star["Polaris"] = new the_stars();
      star["Polaris"].set("Ursa Minor",250,20);
      alert(star["Polaris"].constellation);
      star["Mizar"] = new the_stars();
      star["Mizar"].set("Ursa Major",50,75);
      star["Alderbaran"] = new the_stars();
      star["Alderbaran"].set("Taurus",300,150);
      star["Rigel"] = new the_stars();
      star["Rigel"].set("Orion",350,370);
      function make()
      {
         alert("in make");
         var context = document.getElementById('c').getContext('2d');
         context.fillStyle = 'white';
         context.strokeStyle = 'white';
         for(var thestar in star)
         {
            alert("in for loop "+thestar+thestar.x+thestar.y);
            context.arc(thestar.x,thestar.y,40,0,2*Math.PI);
            context.stroke();
         }
      }
    </script>
    <style type="text/css">
       #c {
           background-color:#000000;
           width:450px;
           height:450px;
       }
    </style>
  </head>
  <body onLoad='make()'>
    <h1>stars</h1>
    <canvas id='c'>
    </canvas>
  </body>
</html>

<!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">
var star = {}
function the_stars() {}
the_stars.prototype = {
    constellation: "test",
    x: 120,
    y: 120
};
function the_stars.set(c,xx,yy) { alert("called"); constellation=c; x=xx; y=yy; };
star["Polaris"] = new the_stars();
star["Polaris"].set("Ursa Minor",250,20);
alert(star["Polaris"].constellation);
star["Mizar"] = new the_stars();
star["Mizar"].set("Ursa Major",50,75);
star["Alderbaran"] = new the_stars();
star["Alderbaran"].set("Taurus",300,150);
star["Rigel"] = new the_stars();
star["Rigel"].set("Orion",350,370);
function make()
{
 alert("in make");
 var context = document.getElementById('c').getContext('2d');
 context.fillStyle = 'white';
 context.strokeStyle = 'white';
 for(var thestar in star)
 {
    alert("in for loop "+thestar+thestar.x+thestar.y);
    context.arc(thestar.x,thestar.y,40,0,2*Math.PI);
    context.stroke();
 }
}
</script>
<style type="text/css">
 #c {
     background-color:#000000;
     width:450px;
     height:450px;
 }
</style>
</head>
<body onLoad='make()'>
<h1>stars</h1>
<canvas id='c'>
</canvas>
</body>
</html>

<!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">
      var star = {}
      function the_stars() {}
      the_stars.prototype = {
        constellation: "test",
        x: 120,
        y: 120
      };
      function the_stars.set(c,xx,yy) { alert("called"); constellation=c; x=xx; y=yy; };
      star["Polaris"] = new the_stars();
      star["Polaris"].set("Ursa Minor",250,20);
      alert(star["Polaris"].constellation);
      star["Mizar"] = new the_stars();
      star["Mizar"].set("Ursa Major",50,75);
      star["Alderbaran"] = new the_stars();
      star["Alderbaran"].set("Taurus",300,150);
      star["Rigel"] = new the_stars();
      star["Rigel"].set("Orion",350,370);
      function make()
      {
         alert("in make");
         var context = document.getElementById('c').getContext('2d');
         context.fillStyle = 'white';
         context.strokeStyle = 'white';
         for(var thestar in star)
         {
            alert("in for loop "+thestar+thestar.x+thestar.y);
            context.arc(thestar.x,thestar.y,40,0,2*Math.PI);
            context.stroke();
         }
      }
    </script>
    <style type="text/css">
       #c {
           background-color:#000000;
           width:450px;
           height:450px;
       }
    </style>
  </head>
  <body onLoad='make()'>
    <h1>stars</h1>
    <canvas id='c'>
    </canvas>
  </body>
</html>
Source Link
jason dancks
jason dancks
  • 1.1k
  • 3
  • 9
  • 30

Javascript: objects in array have undefined variables?

Excuse the title I didn't know how to succinctly state what I'm trying to do. I'm trying to teach myself javascript from snippets from books as well as the internet. My first test script is trying to make an array of objects (stars), and use a for loop to read the data in those objects to draw circles to the canvas at points stored in the objects.

code:

<!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">
var star = {}
function the_stars() {}
the_stars.prototype = {
    constellation: "test",
    x: 120,
    y: 120
};
function the_stars.set(c,xx,yy) { alert("called"); constellation=c; x=xx; y=yy; };
star["Polaris"] = new the_stars();
star["Polaris"].set("Ursa Minor",250,20);
alert(star["Polaris"].constellation);
star["Mizar"] = new the_stars();
star["Mizar"].set("Ursa Major",50,75);
star["Alderbaran"] = new the_stars();
star["Alderbaran"].set("Taurus",300,150);
star["Rigel"] = new the_stars();
star["Rigel"].set("Orion",350,370);
function make()
{
 alert("in make");
 var context = document.getElementById('c').getContext('2d');
 context.fillStyle = 'white';
 context.strokeStyle = 'white';
 for(var thestar in star)
 {
    alert("in for loop "+thestar+thestar.x+thestar.y);
    context.arc(thestar.x,thestar.y,40,0,2*Math.PI);
    context.stroke();
 }
}
</script>
<style type="text/css">
 #c {
     background-color:#000000;
     width:450px;
     height:450px;
 }
</style>
</head>
<body onLoad='make()'>
<h1>stars</h1>
<canvas id='c'>
</canvas>
</body>
</html>

The alert in the for loop gives me the correct name of the star, but tells me x and y are undefined. But how can this be when alert(star["Polaris"].constellation); prints "test", so function set doesn't work but the default values were set but alert("in for loop "+thestar+thestar.x+thestar.y); prints "undefinedundefined. How is this possible?