2

我对 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？

4

1 回答 1

1

首先，您缺少remainingPointsHTML 中的元素。

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

};

在这里拉小提琴。

于 2013-01-02T20:11:32.613 回答