Question

我对JavaScript很陌生，只是真正研究过它用于基于网络的技能计算器。我找到了一个样本，并根据我的需要进行了调整，但是在几个不同的浏览器中进行测试后，我注意到在点击按钮时，计数器没有上升或下降，点击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？< / p>

Answer 1

首先，您缺少HTML中的元素remainingPoints。

<div id='remainingPoints'></div>

其次，在firefox中，将innerText替换为textContent，它应该可以正常工作here：

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

};

小提琴here。

基于JavaScript的技能计算器无法在Firefox中运行

1 个答案: