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

Question

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

即时通讯使用onclick增加和右键单击以减少'var b'这也导致'var max'增加/减少aswell但相反（增加'var b'，减少'var最大值'）

我有2个问题：

1）当‘变种b’升高到其最大的10随后‘变种最大值’被减少到40但即时通讯能够仍然减少‘变种最大’时点击'var b'，'var b'本身并不会增加。

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

所以我想我的问题是如何停止工作时，他们在最小/最大的功能，但仍然继续工作时改变。

我的功能：

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

我的按钮：

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

Answer 1

有很多需要改进的地方在这里。但我认为你主要担心的是你对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 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 
    }; 
}());​ 

随着的（略有修改）的标记：

<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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

这种设置是多一点的代码，但是当你添加的技能，你”我们会注意到你必须增加每种技能的代码量（在这一点上，每种技能大约有2行代码）。此外，还有很多扩展空间，如管理技能名称并通过skills对象提供更多元数据。当它归结时，它更高效，更少出错，并且更容易维护和扩展。

你可以看到它在这里的行动：

http://jsfiddle.net/uFrPQ/

PS - 你可能会考虑增加一个DOM的抽象库像jQuery。它将允许您在保持浏览器兼容性的同时将事件处理程序从标记中移出。