单击时调用变量函数

Question

I am trying to trigger an items effect in an adventure game I am building and I can't seem to figure out how to do it. Basically when clicked I would like whichever item it is to run their effect function. I'm getting quite confused.

    function showItems() {
      for (var i = 0; i < items.length; i++) {
        playerUi.innerHTML += '<div class="item-container"><a href="#" 
    class="item-name" onclick="items[i].effect">' + items[i].name + '</a><br 
    /><p class="desc-p">' + items[i].description + '<br />Value: ' + 
    items[i].price + '</p></div>';
      }
    }

    // Shows the inventory interface.
    $('#inv-btn').on('click', function() {
      playerUi.innerHTML = '<h3>Your Inventory:</h3>';
      showItems();
      playerUi.innerHTML += '<br /><br /><div class="gold-box">Gold: ' + 
    player.gold + '</div>';
    });

The below is the code I have for my items at the minute:

    // I  T  E  M  S
    function invItem(name, type, desc, price, eff) {
      this.name = name;
      this.type = type;
      this.description = desc;
      this.price = price;
      this.effect = eff;
    };

    var weakPotion = new invItem('Weak Potion', 'Consumable', 'A weak health 
    potion.', 10, healSelf(20));
    var brewersPotion = new invItem('Brewers Potion', 'Consumable', 'A 
    standard health potion.', 23, healSelf(45));

    function healSelf(amt) {
      if (player.currentHealth < player.maxHealth) {
        player.currentHealth += amt;
        if (player.currentHealth >= player.maxHealth) {
          player.currentHealth = player.maxHealth;
        }
      }
    }

To see what I currently have so far on this click here .

Below is my player object.

    // Create our player object.
    var player = new Object();
    player.gold = 0;
    player.level = 1;
    player.strength = 5;
    player.intellect = 5;
    player.endurance = 5;
    player.agility = 5;
    player.currentExp = 0;
    player.reqExp = 100;
    player.skillPoints = 0;
    player.attPoints = 2;
    player.maxHealth = 0;
    player.currentHealth = 0;
    player.maxMana = 0;
    player.currentMana = 0;

Answer 1

Lets start at the beginning here. This line

var weakPotion 
     = new invItem('Weak Potion', 'Consumable', 'A weak health potion.', 10, healSelf(20));

Already does not do what you think it does! It will immediately execute the function - which is not what you're trying to do. Instead you should be storing a reference to the function to execute . Fix it by returning a new function to be called later

function healSelf(amt) {
  return function(){
    if (player.currentHealth < player.maxHealth) {
      player.currentHealth += amt;
      if (player.currentHealth >= player.maxHealth) {
        player.currentHealth = player.maxHealth;
      }
    }
  }
}

Next, when you pass a reference to a function, to later execute that function use parentheses:

onclick="items[i].effect()"

But this still wont work - items[i] only exists in the loop - not when the page is running. One way to solve this is to not attach an onclick directly (especially when using jQuery) and instead attach a click handler to those links using index() to find the right item

function showItems() {
  for (var i = 0; i < items.length; i++) {
    playerUi.innerHTML += '<div class="item-container"><a href="#" class="item-name">' + items[i].name + '</a><br /><p class="desc-p">' + items[i].description + '<br />Value: ' + items[i].price + '</p></div>';
  }
}

and elsewhere

$(document).on('click','.item-name',function(){
   var index = $(this).index();
   items[index].effect();
});

Answer 2

Items should have unique IDs so you can easily access them, remove from item list etc. So, ended up with something like that.

 let playerUi = $('#inv'); let player = { currentHealth: 100, maxHealth: 100 }; let items = []; function showItems() { for (var i = 0; i < items.length; i++) { let item = '<li data-itemid="' + items[i].id + '">' + items[i].name + '<br>Description: ' + items[i].description + '</li>'; playerUi.append(item); } } function makeid() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for (var i = 0; i < 5; i++) // Change 5 to higher number for more unique IDs text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; } function invItem(name, type, desc, price, eff) { this.id = makeid(); this.name = name; this.type = type; this.description = desc; this.price = price; this.effect = eff; }; function healSelf(amt) { return function() { console.log("Before heal:" + player.currentHealth); player.currentHealth = Math.min(player.currentHealth+amt, player.maxHealth); console.log("After heal:" + player.currentHealth); } } items[0] = new invItem('Weak Potion', 'Consumable', 'A weak health potion.', 10, healSelf(20)); items[1] = new invItem('Brewers Potion', 'Consumable', 'A standard health potion.', 23, healSelf(45)); items[2] = new invItem('Strongest Potion', 'Consumable', 'This potion is too strong.', 100, healSelf(80)); showItems(); $('li').on('click', function(e) { let id = e.target.dataset.itemid; let item = $.grep(items, function(e) {return e.id == id;})[0]; console.log("Using: " + item.name); player.currentHealth -= 40; item.effect(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="inv"> </ul>