<分区>
我对 JavaScript 还很陌生，只是真正研究了它在基于网络的技能计算器中的用途。 我遇到了一个示例并根据我的需要对其进行了调整，但是在几个不同的浏览器中对其进行测试时，我注意到在 Firefox 中，单击按钮时计数器不会上升或下降，单击 10 次后我仍然收到消息“你已经达到最大值出那个技能!”再次右键单击 10 次会给我消息“你已经用完了那个技能!”正如我所料，但计数器本身并没有改变。
是否有一个简单的修复方法可以让这个在 Firefox 中正常工作，还是我应该走另一条路？
CSS:
.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;
}
HTML:
<div id='skill1'>
<input type="button" class="skillbutton" onclick="SkillManager.increase('skill1')" oncontextmenu="SkillManager.decrease('skill1'); return false;" value="S1" />
</div>
<div id='skill1counter' style="font-weight: bold">0</div>
脚本:
<script type="text/javascript">
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 < max && skills[skill].cur < 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 > 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
};
}());
</script>
另外，作为一个附带问题，我将如何添加一个 if 语句来表示“如果技能 1 = 小于 10，则不能增加技能 2”或者要增加技能 2，技能 1 必须为 10？