Question

This is a continuation of my last question. (thanks for the answer)

Im using an onclick to increase and right click to decrease on ‘var b’ this also causing ‘var max’ to increase/decrease aswell but opposite (increase ‘var b’, decreases ‘var max’)

i have 2 problems:

1) when ‘var b’ is increased to its max of 10 then ‘var max’ is decreased to 40 but im able to still decrease ‘var max’ when clicking ‘var b’, ‘var b’ itself doesnt increase though.

2) possibly the same fix as 1 but, when ‘var max’ is any number below its max of 50, decreasing ‘var b’ or ‘var c’ when they are on their min of 0 ‘var max’ is increased’

So i guess my question is how to stop a function from working when they are at their min/max, but still continue to work when changed.

My functions:

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

My buttons:

 <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

There’s a lot of room for improvement here. But I think your main concern is that you’re a little confused about the purpose of Math.min() and Math.max(). These aren’t really meant to be used as limiters (though they can be useful in the creation of limiters). Instead, you’re probably looking to just do some comparisons, like so:

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

However, I think maybe you’d be better off taking a more object oriented approach to the problem. Because otherwise you’re probably just going to have issue after issue as you try to squash little bugs with little band-aids. Consider the following “enhanced” version of your code:

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
    };
}());​

With the (slightly modified) markup of:

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

This setup is a little more code, but as you add skills, you’ll notice the amount of code you must add per skill goes way down (at this point, it’s about 2 lines of code per skill). Also, there is lots of room for expansion, such as managing skill names and offering more meta-data through the skills object. When it comes down to it, it’s more efficient, less bug prone, and far easier to maintain and expand.

You can see it in action here:

http://jsfiddle.net/uFrPQ/

PS – You might consider adding a DOM-abstraction library like jQuery. It will allow you to pull your events handlers out of your mark-up while maintaining browser compatibility.