2

私は JavaScript に非常に慣れておらず、Web ベースのスキル計算機での使用を実際に調べただけです。サンプルを見つけて自分のニーズに合わせて微調整しましたが、いくつかの異なるブラウザーでテストしているときに、Firefox ではボタンをクリックしてもカウンターが上下しないことに気付きました。そのスキルを出せ！」もう一度右クリックを 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>

また、副次的な質問として、「スキル 1 = 10 未満の場合、スキル 2 を増やすことはできません」またはスキル 2 を増やすには、スキル 1 を 10 にする必要があるという if ステートメントを追加するにはどうすればよいですか?

4

1 に答える 1

1

remainingPointsまず、HTMLに要素がありません。

<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 に答える