CODEWITHSUNDEEP
javascripthtmlbutton
Cornelius Labuschagne
Cornelius Labuschagne

Reputation: 161

How to stop a value from going into negative value

I'm developing an incremental game here is the link for visual reference:

https://code.sololearn.com/WF65X6DEns7o/#css

The problem i have is that buttons can be clicked unlimited times and INCOME value will go into the negative.

How can disable the button if the player doesn't have enough INCOME to click the button

function buttonOne() {
  a++;
  document.getElementById("btnLabel1").innerHTML = " Units Owned :  " + a;
  income -= 500;
  document.getElementById("HeaderLabel").innerHTML = "<b> OK, good, now let's   watch as your money starts to generate slowly but surely. < p > After all no   empire was built in a day. < p > When you have enough money you can buy more   units. " ;


  window.setInterval(function move() {
    var elem = document.getElementById("myprogbar1");
    var width = 1;
    var id = setInterval(frame, 4);

    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++;
        elem.style.width = width + '%';
      }
    }
  }, 1000)
}

function buttonTwo() {
  b++;
  document.getElementById("btnLabel2").innerHTML = " Units Owned :  " + b;
  income -= 1000;

  window.setInterval(function move() {
    var elem = document.getElementById("myprogbar2");
    var width = 1;
    var id = setInterval(frame, 9);

    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++;
        elem.style.width = width + '%';
      }
    }
  }, 2000)
}

function buttonThree() {
  c++;
  document.getElementById("btnLabel3").innerHTML = " Lofts Owned :  " + c;
  income -= 2000;

  window.setInterval(function move() {
    var elem = document.getElementById("myprogbar3");
    var width = 1;
    var id = setInterval(frame, 19);

    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++;
        elem.style.width = width + '%';
      }
    }
  }, 3000)
}
<div id="gameMoneyBG">
  <div id="gameMoney"> Income : $ 500 </div</div>

    <button id="buttonOne" onclick="buttonOne()">
          <b>Small Units</b></button>
    <div id="progbar1">
      <div id="myprogbar1"> </div>
    </div>
    <br /> <br />
    <div id="btnLabel1"> Units Owned : 0 </div>
    <div id="costLabel1">
      Unit Cost : $ 500 </div>

    <br /><br />

    <button id="buttonTwo" onclick="buttonTwo()"><b>Large Units</b></button>
    <div id="progbar2">
      <div id="myprogbar2"> </div>
    </div>
    <br /><br />
    <div id="btnLabel2"> Units Owned : 0 </div>
    <div id="costLabel2"> Unit Cost : $ 1000 </div>

    <br /><br />

    <button id="buttonThree" onclick="buttonThree()"><b>City Lofts</b></button>
    <div id="progbar3">
      <div id="myprogbar3"> </div>
    </div>
    <br /><br />
    <div id="btnLabel3"> Lofts Owned : 0 </div>
    <div id="costLabel3"> Loft Cost : $ 2000 </div>

Upvotes: 0

Views: 880

Answers (5)

Jonas Wilms
Jonas Wilms

Reputation: 138307

Lets beautify your code a bit:

var values=[
  {value:0,sign,bar,desc:"Units",cost:0},
  {value:0,sign,bar,desc:"Units",cost:500},
  {value:0,sign,bar,desc:"Lofts",cost:2000}
];

//init the dom on load
window.addEventListener("load",function(){
//assign all labels
[document.getElementById("btnLabel1"),document.getElementById("btnLabel2"),document.getElementById("btnLabel3")].forEach((el,i)=>values[i].sign=el);

//assign all progressbars:
[document.getElementById("myprogbar1"),document.getElementById("myprogbar2"),document.getElementById("myprogbar3")].forEach((el,i)=>values[i].bar=el);
});

function increase(id){
 //check if user can effort
 if(income<values[id].cost) return alert("Sorry you cant effort :(");
 //decrease income
 income-=values[id].cost;
 //set label
  values[id].sign.innerHTML = values[id].desc+" Owned :  " + (++values[id].value);
  //show some cool animation:
  var width=1;
  values[id].animation=values[id].animation || setInterval(function(){
    width=(1+width)%100;
    values[id].bar.style.width = width + '%';
  },10);
}

function buttonOne() {
   increase(0);
   document.getElementById("HeaderLabel").innerHTML = "<b> OK, good, now lets watch as your money starts togenerate slowly but surely. <p> After all no empire was built in a day. <p> When you have enough money you can buy more units." ;
 }

function buttonTwo() {
 increase(1);
}

function buttonThree() {
  increase(2);
}

You may increase income:

window.setInterval(_=>income++,10);

Upvotes: 1

amiramw
amiramw

Reputation: 506

You can check if the income is below some thresold and then call:

document.getElementById("btnLabel1").disabled = true;

When the income gets higher you can set it back to false.

Upvotes: 1

Joseph Kazarian
Joseph Kazarian

Reputation: 23

First of all as I saw that each function reduces the income with a different value. So first of all define constant integers and set these values in them. And about your code you can nest the content of the function in an if-else statement

var buttonOnePrice = 500;

function buttonOne() {
if(income >= buttonOnePrice) {
a++;
document.getElementById("btnLabel1").innerHTML = " Units Owned :  " + a;
income-=buttonOnePrice;
document.getElementById("HeaderLabel").innerHTML = "<b> OK, good, now lets 
watch as your money starts to generate slowly but surely. <p> After all no 
empire was built in a day. <p> When you have enough money you can buy more 
units." ;


window.setInterval (function move() {
var elem = document.getElementById("myprogbar1");
var width = 1;
var id = setInterval(frame, 4);
function frame() {
    if (width >= 100) {
        clearInterval(id);
    } else {
        width++;
        elem.style.width = width + '%';
    }
   }
   }, 1000)
}
    } else {
}

and you can handle he else statement as you want. for example you can show an alert "insufficient funds" or something like that

Upvotes: 0

prasanth
prasanth

Reputation: 22500

paste the code with each function after income -=num .It will restrict the value below 0 .its ternary operator 

 income= income < 0 ? 0 :income;

Js Code

 var income = 500;
    var a = 0;
    var b = 0;
    var c = 0;

    alert("Welcome to my game. It took me 2 days to create it.  I hope you enjoy it. \n\nPlease note that you get best experience on a PC not on a mobile. \n\n Also please ignore any bugs you may find, but feedback on improvement is welcome.")


    function buttonOne() {

        a++;
        document.getElementById("btnLabel1").innerHTML = " Units Owned :  " + a;
        income-=500;
         income= income < 0 ? 0 :income;
        document.getElementById("HeaderLabel").innerHTML = "<b> OK, good, now lets watch as your money starts to generate slowly but surely. <p> After all no empire was built in a day. <p> When you have enough money you can buy more units." ;


        window.setInterval (function move() {
        var elem = document.getElementById("myprogbar1");
        var width = 1;
        var id = setInterval(frame, 4);
        function frame() {
            if (width >= 100) {
                clearInterval(id);
            } else {
                width++;
                elem.style.width = width + '%';
            }
        }
    }, 1000)
    }

    function buttonTwo() {
        b++;
        document.getElementById("btnLabel2").innerHTML = " Units Owned :  " + b;
        income-=1000;
             income= income < 0 ? 0 :income;
        window.setInterval (function move() {
        var elem = document.getElementById("myprogbar2");
        var width = 1;
        var id = setInterval(frame, 9);
        function frame() {
            if (width >= 100) {
                clearInterval(id);
            } else {
                width++;
                elem.style.width = width + '%';
            }
        }
    }, 2000)
    }

    function buttonThree() {
        c++;
        document.getElementById("btnLabel3").innerHTML = " Lofts Owned :  " + c;
        income-=2000;
         income= income < 0 ? 0 :income;
        window.setInterval (function move() {
        var elem = document.getElementById("myprogbar3");
        var width = 1;
        var id = setInterval(frame, 19);
        function frame() {
            if (width >= 100) {
                clearInterval(id);
            } else {
                width++;
                elem.style.width = width + '%';
            }
        }
    }, 3000)
    }

    window.setInterval(function() {
        if (a >= 1)
          document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=a*5);

        if(a>=25)
        document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=a *10);

        if(a>=50)
        document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=a *20);

    }, 1000)

    window.setInterval(function() {
        if (b >= 1)
          document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=b+49*b);

        if (b >= 25)
          document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=b+49*b*4);

        if (b >= 50)
          document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=b+49*b*8);

    }, 2000)

    window.setInterval(function() {
        if (c >= 1)
          document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=c+99*c);

        if (c >= 25)
          document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=c+99*c*4);

        if (c >= 50)
          document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=c+99*c*8);
    }, 3000)

    function income(){
        if (income >= 1000000)
        document.getElementById("HeaderLabel").innerHTML = "You have been caught for tax evasion. The Government will now take $500 000." ;
    }

Upvotes: 1

Gianfrancesco Aurecchia
Gianfrancesco Aurecchia

Reputation: 780

Ok i fix the button events, if you put these it works perfectly perfectly

function buttonOne() {
    if (income-500>=0){
    a++;
    document.getElementById("btnLabel1").innerHTML = " Units Owned :  " + a;
    income-=500;
    document.getElementById("HeaderLabel").innerHTML = "<b> OK, good, now lets watch as your money starts to generate slowly but surely. <p> After all no empire was built in a day. <p> When you have enough money you can buy more units." ;


    window.setInterval (function move() {
    var elem = document.getElementById("myprogbar1");
    var width = 1;
    var id = setInterval(frame, 4);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++;
            elem.style.width = width + '%';
        }
    }
}, 1000)
}
}

function buttonTwo() {
    if (income-1000>=0){
    b++;
    document.getElementById("btnLabel2").innerHTML = " Units Owned :  " + b;
    income-=1000;

    window.setInterval (function move() {
    var elem = document.getElementById("myprogbar2");
    var width = 1;
    var id = setInterval(frame, 9);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++;
            elem.style.width = width + '%';
        }
    }
}, 2000)
}
}

function buttonThree() {
    if (income-2000>=0){
    c++;
    document.getElementById("btnLabel3").innerHTML = " Lofts Owned :  " + c;
    income-=2000;

    window.setInterval (function move() {
    var elem = document.getElementById("myprogbar3");
    var width = 1;
    var id = setInterval(frame, 19);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++;
            elem.style.width = width + '%';
        }
    }
}, 3000)
}
}

I just checked if your money less the unit cost would be static greater or equal to zero

if (income-2000>=0){ ... }

Upvotes: 0

Related Questions