CODEWITHSUNDEEP
javascriptjquery
Elaine Byene
Elaine Byene

Reputation: 4142

Add / Substract Number

I got this working to add/minus a number in the input field.

However, I want the result to be display in <p class="qty1"></p> and not in the input field.

I tried to get it done myself using innerHTML but couldn't get it to work. 

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('.form-height').find('.qty'),
    currentVal = parseInt($qty.val()),
    isAdd = $(this).hasClass('add');
    !isNaN(currentVal) && $qty.val(
    isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal)
    );
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-height">
  <input id="qty1" type="text" readonly value="5" class="qty form-control" />
  <p class="qty1"></p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />                  
</div>
<hr />
<div class="form-height">
  <input id="qty2" type="text" readonly value="7" class="qty form-control" />
  <p class="qty2"></p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />                  
</div>

Upvotes: 0

Views: 58

Answers (2)

Nick
Nick

Reputation: 147266

If I understand your question correctly, this code should do what you want:

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('.form-height').find('.qty'),
    currentVal = parseInt($qty.val()),
    isAdd = $(this).hasClass('add');
    if (!isNaN(currentVal)) {
        newVal = isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal);
        $p.text(newVal);
        $qty.val(newVal);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-height">
  <input id="qty1" type="text" readonly value="5" class="qty form-control" />
  <p class="qty1"></p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />                  
</div>
<hr />
<div class="form-height">
  <input id="qty2" type="text" readonly value="7" class="qty form-control" />
  <p class="qty2"></p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />                  
</div>

Edit If the <input> tag is to be completely deleted, then it only requires a minor modification to your code:

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('.form-height').find('.qty'),
    currentVal = parseInt($qty.text()),
    isAdd = $(this).hasClass('add');
    !isNaN(currentVal) && $qty.text(
    isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal)
    );
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-height">
  <p class="qty">5</p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />                  
</div>
<hr />
<div class="form-height">
  <p class="qty">7</p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />                  
</div>

Upvotes: 2

Saurabh Ghewari
Saurabh Ghewari

Reputation: 709

You can use .html() or .text() to append the value to p tag like

$('.qty1').html(currentValue);

OR

$('.qty1').text(currentValue);

To know the difference between two methods Click here

Upvotes: 1

Related Questions