javascript based skill calculator not working in Firefox
<p>I am very new to JavaScript and only really looked into its use for a web based skill calculator. 
I came across a sample and tweaked it to my needs but whilst testing it in several different browsers i noticed that in Firefox the counter does not go up or down when the button is clicked, after 10 clicks i still get the message "You have maxed out that skill!" and right clicking 10 times again gives me the message "You have maxed out that skill!" as i would expect but the counter itself does not change.</p>

<p>is there an easy fix to get this working in Firefox or should i go another route?</p>

<p>The CSS:</p>

<pre><code>.skillbutton {
  background:url() no-repeat;
  cursor:pointer;
  width: 250px;
  height: 12px;
  border: none;
  color: transparent;
}

#skill1counter {
  margin-left: auto ;
  margin-right: auto ;
  font-size:0.6em;
}

#skill1 {
  width: 250px ;
  height: 12px ;
  margin-left: auto ;
  margin-right: auto ;
  background-image:url(images/skill/skill1.png);
  background-repeat:no-repeat;
}
</code></pre>

<p>The HTML:</p>

<pre><code>&lt;div id='skill1'&gt;
&lt;input type="button" class="skillbutton" onclick="SkillManager.increase('skill1')" oncontextmenu="SkillManager.decrease('skill1'); return false;" value="S1" /&gt;
&lt;/div&gt;
&lt;div id='skill1counter' style="font-weight: bold"&gt;0&lt;/div&gt;
</code></pre>

<p>The Script:</p>

<pre><code>&lt;script type="text/javascript"&gt;

var SkillManager = (function() {
var max = 50,
    skills = {
        skill1: {
            cur: 0,
            max: 10
        },
        skill2: {
            cur: 0,
            max: 10
        },
        skill3: {
            cur: 0,
            max: 10
        }
    },
    totalUsed = 0;

var increase = function(skill) {
    if (totalUsed &lt; max &amp;&amp; skills[skill].cur &lt; skills[skill].max) {
        skills[skill].cur++;
        totalUsed++;
        updateDisplay(skill, skills[skill].cur, max - totalUsed);
    } else if(skills[skill].cur === skills[skill].max) {
        alert("You have maxed out that skill!");
    } else {
        alert("You have used all your skill points!");
    }
};

var decrease = function(skill) {
    if (skills[skill].cur &gt; 0) {
        skills[skill].cur--;
        totalUsed--;
        updateDisplay(skill, skills[skill].cur, max - totalUsed);
    } else {
        alert("You can't decrease a skill with 0 points in it!");
    }
};

var updateDisplay = function(skill, value, totalRemaining) {
    document.getElementById(skill + "counter").innerText = value;
    document.getElementById("remainingPoints").innerText = totalRemaining;
};

return {
    decrease: decrease,
    increase: increase
};
}());

&lt;/script&gt;
</code></pre>

<p>Also as a side question, how would i go about adding an if statement that said "if skill 1 = less than 10 then skill 2 cannot be increased" or for skill 2 to be increased skill 1 must be at 10?</p>
