CODEWITHSUNDEEP
javascripthtmlincrement
user3209230
user3209230

Reputation:

How to set increment minimum

Hello I'm doing a project for school and I need to make something that counts +1 and +5 and -1 and -5, but if it reaches 0 and I press the -1 button it will go in to the negative.

I tried 

if("#total" < 0)
{
    number = 0;
}

But it didn't work

This is my code so far:

 $(document).ready(function()
 {
    $("#add_buttonplus").click(function() {
       var $counter = $("#total");
       $counter.val(Number($counter.val()) + 1);
    });
 });

 $(document).ready(function() {
    $("#add_buttonminus").click(function()
    {
       var $counter = $("#total");
       $counter.val(Number($counter.val()) - 1);
    }
 });

 $(document).ready(function()
 {
    $("#add_buttonplus2").click(function() {
       var $counter = $("#total");
       $counter.val(Number($counter.val()) + 5);
    });
 });

 $(document).ready(function() {
    $("#add_buttonminus2").click(function()
    {
       var $counter = $("#total");
       $counter.val(Number($counter.val()) - 5);
    });
 });

My HTML:

<html>
   <head>
      <!--Title of the Site-->
      <title>
      </title>
      <!-- Extern CSS -->
      <link rel="stylesheet" type="text/css" href="order.css">
      <!-- Jquery -->
      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
      <!-- Extern JavaScript -->
      <script src="order.js" type="text/JavaScript"></script>
   </head>
   <body>
      <h1>
         Flower
      </h1>
      <div id='Flower'>
         <a href="#" id="add_buttonplus1"></a>
         <a href="#" id="add_buttonminus1"></a>
         <p id="Flowertekst1">
            Add 1 Kilo
         </p>
         <a href="#" onclick="" id="add_buttonplus2"></a>
         <a href="#" onclick="" id="add_buttonminus2"></a>
         <p id="Flowertekst2">
            Add 5 Kilo
         </p>
         <p id="Flowertotaal">
            Total:
         </p>
         <input type="text" value="1" id="total" readonly />
      </div>
   </body>
</html>

Upvotes: 3

Views: 427

Answers (1)

Allan Chua
Allan Chua

Reputation: 10175

You have to add an if statement to ensure that whenever the difference between the two digits is lower than 0 the value of the input will be set to 0.

  if((FlowerTotal - 5) < 0)
     $("#FlowerTotal").val(0);
  else 
     $("#FlowerTotal").val(FlowerTotal - 5);

Here is the updated Html:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <meta charset="utf-8" />
    <title>JS Bin</title>
</head>
<body>
    <h1>Flower</h1>
    <div id='Flower'>
        <p id="btnAdd1">Add 1 Kilo</p>
        <p id="btnAdd5">Add 5 Kilo</p>
        <p id="btnSub1">Subtract 1 Kilo</p>
        <p id="btnSub5">Subtract 5 Kilo</p>

        <p>Total:</p>
        <input id="FlowerTotal" type="text" value="1" id="total" readonly />
    </div>
</body>
</html>

Here is the jQuery/Javascript

$("#btnAdd5").click(function(){
  var FlowerTotal = parseInt($("#FlowerTotal").val());
  $("#FlowerTotal").val(FlowerTotal + 5);
}); 

$("#btnAdd1").click(function(){
  var FlowerTotal = parseInt($("#FlowerTotal").val());
  $("#FlowerTotal").val(FlowerTotal +1);
}); 


$("#btnSub5").click(function(){
  var FlowerTotal = parseInt($("#FlowerTotal").val());

  if((FlowerTotal - 5) < 0)
     $("#FlowerTotal").val(0);
  else 
     $("#FlowerTotal").val(FlowerTotal - 5);
}); 

$("#btnSub1").click(function(){
  var FlowerTotal = parseInt($("#FlowerTotal").val());
  if((FlowerTotal -1) < 0)
     $("#FlowerTotal").val(0);
  else 
     $("#FlowerTotal").val(FlowerTotal - 1);
});

You can also review it online: http://jsbin.com/EloSOTi/7/edit

Upvotes: 0

Related Questions