如何显示库存中的物品

Question

How to make something like this to work? I'm really new to programming and cant figure it out how to to make my inventory visible?

Getting this error: Uncaught TypeError: Cannot read property 'img' of undefined image.(anonymous function).onload

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var image = {};

function loadImage(name) {
    image[name] = new Image();
    image[name].onload = function () {
        //resourceLoaded();
    };
    image[name].src = "images/" + name;
}

var items = {
    knife: {
        name: "Knife",
        img: "knife.png"

    },
    sword: {
        name: "Sword",
        img: "sword.png"
    }
};

var inventory = []; //empty inventory

inventory.push(items.knife); //pickup a knife

for (var i = 0, len = inventory.length; i < len; i++) {
    loadImage(inventory[i].img);
    image[inventory[i].img].onload = function() {
            ctx.drawImage(image[inventory[i].img], 0, 0);
    }
}

Trying many things but cant understand anything better than this one :( Because im new to programing

Answer 1

There's no block scope in JavaScript, only function scope. The i variable is the same everywhere in your snippet. So when the image is loaded the i variable has the value of 2 ( inventory.length ).

To do what you intend to do, you have to introduce a function scope. One way to do it would be to do this :

function createCallback(i) {
    loadImage(inventory[i].img);
    image[inventory[i].img].onload = function() {
        ctx.drawImage(image[inventory[i].img], 0, 0);
    }
}

for (var i = 0, len = inventory.length; i < len; i++) {
    createCallback(i);
}

Answer 2

You're trying to do the same thing twice in your for loop. That is, you should only have loadImage(inventory[i].img) in your for loop and move the ctx.drawImage call to within the loadImage() function:

function loadImage(name) {
    image[name] = new Image();
    image[name].onload = function () {
        //resourceLoaded();
        ctx.drawImage(image[name], 0, 0);
    };
    image[name].src = "images/" + name;
}

This will draw the images on top of each other, though, if you add more to the inventory array.