0

So in my game I'm making, the onclick events aren't working as expected. For some reason this line of code onclick=upgrade.purchase('+i+') The mousepad works when I click, but when I use my mouse it doesn't do anything. I have another line of code that are pretty much the same onclick=achievement.disappear('+i+') and when I use the mouse it disappears(which is the intended effect). The it works perfectly fine with the mousepad. IDK why it so inconsistent tho. I should probably just give you the whole function too.

updateUpgrades: function () {
    document.getElementById("upgradeContainer").innerHTML = " ";
    for (var i = 0; i < upgrade.name.length; i++) {
      if (!upgrade.purchased[i]) {
        if (upgrade.type[i] == "building" && building.count[upgrade.buildingIndex[i]] >= upgrade.requirement[i]) {
          document.getElementById("upgradeContainer").innerHTML += '<img src="'+upgrade.image[i]+'" title="'+upgrade.name[i]+' &#10;'+upgrade.description[i]+'&#10;('+upgrade.cost[i]+' bitcoin)" onclick=upgrade.purchase('+i+')>';

        } else if (upgrade.type[i] == "click" && game.totalClicks >= upgrade.requirement[index]){
               document.getElementById("upgradeContainer").innerHTML += '<img src="'+upgrade.image[i]+'" title="'+upgrade.name[i]+' &#10;'+upgrade.description[i]+' &#10;('+upgrade.cost[i]+' bitcoin)" onclick=upgrade.purchase('+i+')>';
        } 
      }
    }
  },

its in a object btw. Also I have experience with HTML, but my knowlegde is not great so please bear with me lol. Other things that make the function work

let upgrade = {
  name: [
    "Better Picks",
    "Better GPUs",
    "Bigger Warehouses",
    "Faster PCs",
    "goldPicks"
  ],
  description: [
    "Picks mine twice the amount of bitcoin",
    "Miners mine twice the amount of bitcoin",
    "Warehouses mine twice the amount of bitcoin",
    "Hackers mine twice the amount of bitcoin",
    "Picks mine three times the amount of bitcoin"
  ],
  image: [
    "goldPickaxe.png",
    "gpu.png",
    "MiningWarehouse.jpeg",
    "Hacker.jpg",
    "goldPickaxe.png"

  ],
  type: [
    "building",
    "building",
    "building",
    "building",
    "building"
  ],
  cost: [
    100,
    500,
    1000,
    5000,
    10000
  ],
  buildingIndex: [
    0,
    1,
    2,
    3,
    0
  ],
  requirement: [
    5,
    10,
    15,
    20,
    30
  ],
  bonus: [
    2,
    2,
    2,
    2,
    3
  ],
  purchased: [
  false,
  false,
  false,
  false,
  false
  ],

  purchase: function (index) {
    if (!this.purchased[index] && game.score >= this.cost[index]) {
      if (this.type[index] == "building" && building.count[this.buildingIndex[index]] >= this.requirement[index]) {
        game.score -= this.cost[index];
        building.income[this.buildingIndex[index]] *= this.bonus[index];
        this.purchased[index] = true;

        display.updateUpgrades();
        display.updateScore();

      } else if (this.type[index] == "click" && game.totalClicks >= this.requirement[index]) {
        game.score -= this.cost[index];
        game.clickValue *= this.bonus[index];
        this.purchased[index] = true;

        display.updateUpgrades();
        display.updateScore();
      }
    }
  }
};
Ethan Agar
  • 92
  • 9
  • Aren't you missing `"` on the inline `onclick` handlers? – morganney Sep 29 '21 at 05:02
  • So, `onclick=upgrade.purchase('+i+')` doesn't work and `onclick=achievement.disappear('+i+')` does? Would it be possible to see the functions? It might be an idea to look into [events](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#example_of_options_usage) and their callback function parameters. – phentnil Sep 29 '21 at 05:03
  • @morganney the qoutations change anything – Ethan Agar Sep 29 '21 at 05:26
  • @phentnil ok I added the object that makes the function work – Ethan Agar Sep 29 '21 at 05:28
  • Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Sep 29 '21 at 05:58
  • _"The mousepad works when I click, but when I use my mouse it doesn't do anything."_ - there should be no difference between those two input methods, from JavaScript's perspective - a `click` by either one, should fire the event handlers the same way. – CBroe Sep 29 '21 at 06:43

0 Answers0