Random mc in Animate CC using javascript HTML5

Question

In a Animate CC Canvas project, I have several mc's in the library with these linkage names: card1, card2, card3... and want to put a random mc on stage using Javascript/HTML5 code.

var container, c, card; // basic stuff

function init() {
  c = createjs;
  container = new c.Container();
  stage.addChild(container);

  var m = 1; // a random number
  card = new lib.this["card" + m](); // GIVES ERROR. This is AS3 style.
  //card = new lib.card1();  // WORKS FINE!
  container.addChild(card);
  card.x = 800;
  card.y = 250;
}  

I get error:

Uncaught TypeError: Cannot read property 'card1' of undefined.

Any ideas, please? :)

Answer 1

card = new lib.this["card" + m](); // GIVES ERROR. This is AS3 style.  
// card = new lib.card1();  // WORKS FINE!

From this I have two points to clear:

• This is because we do not use this keyword as a property of some object. We use it in the object's methods as a reference to it.

  var foo = { x: 1, y: 2 };
  console.log(foo.this);      // → undefined
  console.log(foo.this["x"]); // → Type Error
  
  var bar = { x: 1, y: 2, showX: function () { return this["x"] } }
  console.log(bar.showX());   // → 1
  

  But you can have a property named this:

  var foo { this: 1, that: 2 }
  console.log(foo.this);      // → 1
  

  
  

• You can access an object's properties using the . notation or the [] notation, (no need for this) like so:

  var foo = { x: 1, y: 2 };
  console.log(foo.x);         // → 1
  console.log(foo["y"]);      // → 2
  

So what you need to do is:

card = new lib["card" + m]();

---

The following is an example using divs. I tried to follow your code to keep it similar. The lib object has 4 constructors card1 to card4 as properties, each generating cards with a specific color.

const createjs = {
    Container: function () {
      this.elt = document.createElement("div");
      this.elt.classList.add("container");
    }
  },
  
  Card = function () {
    this.elt = document.createElement("span");
    this.elt.classList.add("card");
  },
  
  lib = {
    card1: function () {
      this.elt = new Card().elt;
      this.elt.style.background = "lightblue";
    },
    card2: function () {
      this.elt = new Card().elt;
      this.elt.style.background = "gold";
    },
    card3: function () {
      this.elt = new Card().elt;
      this.elt.style.background = "lightgreen";
    },
    card4: function () {
      this.elt = new Card().elt;
      this.elt.style.background = "#f76";
    }
  };


function init() {
  let container = new createjs.Container().elt;
  stage.appendChild(container);

  for (let m = 1; m < 5; m++) {
    let card = new lib["card" + m]().elt;
  
    card.style.width = 80 + "px";
    card.style.height = 100 + "px";
    container.appendChild(card);
  }
}  

init();

#stage {
  background: #e85;
  height: 500px;
  padding: 1px;
}

.container {
  margin: 60px;
  background: #fff3;
}

.card {
  display: inline-block;
  border-radius: 10px;
  width: 80px;
  height: 100px;
  margin: 1em;
}

<div id="stage"></div>