Javascript 达到最小/最大值时停止功能

这是我最后一个问题的继续。（谢谢你的回答）

Im使用onclick增加，右键单击减少“var b”，这也会导致“var max”增加/减少，但相反（增加“var b”，减少“var max”）

我有两个问题：

1） 当“var b”增加到其最大值10时，“var max”将减少到40，但我仍然可以在单击“var b”时减少“var max”，尽管如此，var b本身并没有增加

2） 可能与1相同，但当“var max”是低于其最大值50的任何数字时，当其最小值为0时，减小“var b”或“var c”会增大“var max”

因此，我想我的问题是，当函数处于最小/最大值时，如何停止其工作，但在更改时仍继续工作

我的职能：

var max=50;
function decrease(){
  max = Math.max(max-1,0);
  document.getElementById('boldstuff').innerHTML = max;
  if(max < 1){
    alert("There are no more skill points to be spent.");
  }
}
function increase(){
  max = Math.min(max+1,50);
  document.getElementById('boldstuff').innerHTML = max;
}

var b=0;
function increase1(){
  b = Math.min(b+1,10);
  document.getElementById('boldstuff2').innerHTML = +b;
  if(b > 9){
    alert("You have spent all the points you can in this skill.");
  }
}
function decrease1(){
  b = Math.max(b-1,0);
  document.getElementById('boldstuff2').innerHTML = +b;
}


var c=0;
function increase2(){
  c = Math.min(c+1,10);
  document.getElementById('boldstuff3').innerHTML = +c;
  if(c > 9){
    alert("You have spent all the points you can in this skill.");
  }
}
function decrease2(){
  c = Math.max(c-1,0);
  document.getElementById('boldstuff3').innerHTML = +c;
}

var max=50；
函数减少（）{
max=数学最大值（max-1,0）；
document.getElementById（'boldstuff'）。innerHTML=max；
如果（最大值<1）{
警惕（“不再需要花费技能点数了。”）；
}
}
功能增加（）{
最大值=数学最小值（最大值+1,50）；
document.getElementById（'boldstuff'）。innerHTML=max；
}
var b=0；
函数递增1（）{
b=数学最小值（b+1,10）；
document.getElementById（'boldstuff2'）。innerHTML=+b；
如果（b>9）{
警惕（“你已经用尽了这个技能所能得到的所有点数。”）；
}
}
函数递减1（）{
b=数学最大值（b-1,0）；
document.getElementById（'boldstuff2'）。innerHTML=+b；
}
var c=0；
函数递增2（）{
c=数学最小值（c+1,10）；
document.getElementById（'boldstuff3'）。innerHTML=+c；
如果（c>9）{
警惕（“你已经用尽了这个技能所能得到的所有点数。”）；
}
}
函数递减2（）{
c=数学最大值（c-1,0）；
document.getElementById（'boldstuff3'）。innerHTML=+c；
}

我的按钮：

 <div id='rem'>Remaining Skill Points: <b id="boldstuff">50</b></div>

 <div id='skill1'><input type="submit" class="skillbutton" onclick="decrease();increase1();" oncontextmenu="increase();decrease1();return false;"></div>
 <div id='counter1'><b id="boldstuff2">0</b></div>
 <div id='skill2'><input type="submit" class="skillbutton" onclick="decrease();increase2();" oncontextmenu="increase();decrease2();return false;"></div>
 <div id='counter2'><b id="boldstuff3">0</b></div>

剩余技能点数：50
0
0

这方面还有很大的改进空间。但我认为您主要担心的是您对

Math.min（）

和

Math.max（）

的用途有点困惑。这些并不是真正用来作为限制器的（尽管它们在创建限制器时很有用）。相反，你可能只是想做一些比较，比如：

var max=50;
function decrease() { 
    if(max > 0) {
        max--; 
        document.getElementById('boldstuff').innerHTML = max;
    } else {
        alert("There are no more skill points to be spent.");
    }
}

function increase() {
    if(max < 50)
        max++; 
        document.getElementById('boldstuff').innerHTML = max;
    }
}

var max=50；
函数减少（）{
如果（最大值>0）{
马克斯；
document.getElementById（'boldstuff'）。innerHTML=max；
}否则{
警惕（“不再需要花费技能点数了。”）；
}
}
功能增加（）{
如果（最大值<50）
max++；
document.getElementById（'boldstuff'）。innerHTML=max；
}
}

然而，我认为也许你最好采用一种更面向对象的方法来解决这个问题。因为否则，当你试图用小小的创可贴压扁小虫子时，你可能会遇到一个又一个问题。考虑以下代码的“增强”版本：

var SkillManager = (function() {
    var max = 50,
        skills = {
            skill1: {
                cur: 0,
                max: 10
            },
            skill2: {
                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
    };
}());​

var SkillManager=（函数（）{
var max=50，
技能={
技能1：{
电流：0，
最多：10
},
技能2：{
电流：0，
最多：10
}
},
totalUsed=0；
风险增加=功能（技能）{
if（totalUsed0）{
技能[技能].cur--；
全部使用--；
updateDisplay（skill，skills[skill].cur，max-totalUsed）；
}否则{
警告（“你不能降低一个0点的技能！”）；
}
};
var updateDisplay=函数（技能、价值、总剩余）{
document.getElementById（skill+“counter”）.innerText=值；
document.getElementById（“remainingPoints”）.innerText=totalRemaining；
};
返回{
减少:减少,，
增加：增加
};
}());​

使用（稍微修改的）标记：

<div id='rem'>Remaining Skill Points: <b id="remainingPoints">50</b></div>

<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>
<div id='skill2'>
    <input type="button" class="skillbutton" onclick="SkillManager.increase('skill2')" oncontextmenu="SkillManager.decrease('skill2'); return false;" value="S2" />
</div>
<div id='skill2counter' style="font-weight: bold">0</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

剩余技能点数：50
0
0​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

这个设置需要更多的代码，但是当您添加技能时，您会注意到每个技能必须添加的代码量会大大减少（此时，每个技能大约需要2行代码）。此外，还有很多扩展空间，例如管理技能名称，并通过

skills

对象提供更多元数据。归根结底，它更高效，更不容易出现bug，更易于维护和扩展

你可以在这里看到它的作用：

---

PS——您可以考虑添加一个DOM抽象库，比如jQuery。它将允许您在保持浏览器兼容性的同时将事件处理程序从标记中删除。

我将稍微扩展一下我的答案。给我几分钟。谢谢你的帮助：D@zhaobaloth没问题，很有趣。你似乎对JavaScript非常陌生，我知道它可能会让人感到害怕和棘手（主要是因为JavaScript功能强大，有100种方法可以“做错”，其中90种没有明显的惩罚）。我建议你看看Doug Crockford关于JavaScript的讲座（用谷歌搜索它们），它们非常棒，可以向你展示为什么你应该做一些事情而不应该做其他事情。我很感激你对这门语言的兴趣，你的项目看起来很有趣。继续干下去，继续干下去！