div的构造函数返回未定义的元素

Question

I have a page I'm trying to refactor using a constructor function rather than preloading several hidden divs. I've never used constructors before and I'm using this Code Review post as a guide. The only difference is that my div is being created on page load.

The data is stored as JSON and I find the correct object index by matching the ID. When the data from the matched object is passed to the constructor, each variable is undefined in the console and I cannot figure out why.

data.json

{
  "missions": [
    { "id":"miss1",
      "content": {
        "name": "Mission 1",
        "desc": "This is a string description for a mission",
        "longDesc": "This is the mission's lond description in case a short one is used someplace else.",
        "img": "https://via.placeholder.com/250",
        "vid": "https://via.placeholder.com/840x430"
        }
      },
     ...
  ]
}

index.html

<!-- ... -->
<div class='card--small' id='miss1'><h2>Mission 1</h2></div>
<!-- repeat _n_ times... -->

<div id="card-large></div>

script.js

function Card(longDesc, img, video) {
    this.desc = longDesc;
    this.img = img;
    this.video = video;

    console.log(this.desc) // undefined

    var container = document.getElementById("card-large");
    var card = document.createElement("div");
    card.className = "card";

    var img = document.createElement('div');
    img.className = "card__img";
    img.style.backgroundImage = "url(" + this.img + ")";
    card.appendChild(img);

    var bio = document.createElement('div');
    bio.className = "card__bio";
    bio.innerHTML = this.desc

    this.create = function() {
      container.appendChild(card);
    }
  }

  $(".card--small").click(function() {

    var card = new Card();

    var id = $(this).attr('id');

    $.getJSON("data.json").done(function(data) {
      for(var j=0; j<data.missions.length; j++) {
        if(id == data.missions[j].id) {
          card.create(data.missions[j].content.longDesc, data.missions[j].content.img, data.missions[j].content.vid);
        }
      }
    })
  })

I tried serializing/stringifying the data passed to the function, but that didn't help. What am I doing wrong? Am I overcomplicating this?

Answer 1

So a few stuff is incorrect:

The constructor is "kinda" correct, only only difference you should have to do is moving the arguments you are sending into "card.create(...)" should be sent into "new Card(...)"

... = the arguments.

Above is for one element tho, as you wanna use a loop instead pretty much all your code in the card method should be moved into the create method. Ofc this is not a good way to do it, but it's the way to solve the issue you currently got.