基于javascript的技能计算器在Firefox中不工作

javascript based skill calculator not working in Firefox

本文关键字：Firefox 工作 计算器 javascript 基于      更新时间：2023-09-26

我对JavaScript非常陌生，只是真正研究了它在基于web的技能计算器中的使用。我遇到了一个样本，并根据我的需要进行了调整，但在几个不同的浏览器中进行测试时，我注意到在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?

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

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

第二，在firefox中，将innerText替换为textContent，它应该可以正常工作，如下所示:

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;
    }
};

小提琴。

相关文章：