Change array value inside of function in an element in javascript

Issue

I am trying to change an array value thats inside of a function of my button. I want the first number in the array to change but can't seem to get it working

So i want my HTML to go from this:

<button onclick="skillUpgrade([50,5])">Upgrade your skill</button>

To this:

<button onclick="skillUpgrade([55,5])">Upgrade your skill</button>

Here is my javascript

function skillUpgrade(el) {
  roundDown = Math.floor(money / el[0]);
  if (memes >= el[0] * checkTimes) {
    baseClicks = baseClicks + (el[1] * checkTimes);
    money = money - (el[0] * checkTimes);
    newPrice = el[0] * 1.1;
    el[0] = newPrice;
    console.log(el[0])
    document.getElementById("moneyAmount").innerHTML = money;
  }
}

Solution

It is generally not a good idea to use inline event handlers. Here is a minimal reproducable example. It uses a data-attribute to store values within the button and event delegation to handle the button click.

document.addEventListener(`click`, handle);

function handle(evt) {
  // do something if the click originated from button#upgradeSkill
  if (evt.target.id === "upgradeSkill") {
    const btn = evt.target;
    const currentValue = btn.dataset.values.split(`,`)
      .map(Number);
    //     ^ convert values to Number                                        
    currentValue[0] += 5;
    // reset the values
    // note: the array is automatically converted back to string
    btn.dataset.values = currentValue;
  }
}

#upgradeSkill:after {
  content: ' (current 'attr(data-values)')'; 
}

<button id="upgradeSkill" data-values="50,5">Upgrade your skills</button>

Answered By - KooiInc