jQuery Math Don't work

Question

I'm trying to do quantity system and my code is :

    <div class="sp-quantity">
        <div class="sp-minus fff"> <a class="ddd" href="#">-</a></div>
        <div class="sp-input">
            <input type="text" class="quntity-input" value="1">
        </div>
        <div class="sp-plus fff"> <a class="ddd-plus" href="#">+</a></div>
    </div>
    <script>
    $('.ddd-plus').click(function(){
        var $old = $('.quntity-input').val();
        var $plus =($old +1);
        // var $minus = $old - 1;
        $('input').val($plus);
        console.log($plus,$old);
    });
    </script>
<style>.sp-quantity {
    width:124px;
    height:42px;
    font-family:"ProximaNova Bold", Helvetica, Arial;
}
.sp-minus {
    width:40px;
    height:40px;
    border:1px solid #e1e1e1;
    float:left;
    text-align:center;
}
.sp-input {
    width:40px;
    height:40px;
    border:1px solid #e1e1e1;
    border-left:0px solid black;
    float:left;
}
.sp-plus {
    width:40px;
    height:40px;
    border:1px solid #e1e1e1;
    border-left:0px solid #e1e1e1;
    float:left;
    text-align:center;
}
.sp-input input {
    width:30px;
    height:34px;
    text-align:center;
    font-family:"ProximaNova Bold", Helvetica, Arial;
    border: none;
}
.sp-input input:focus {
    border:1px solid #e1e1e1;
    border: none;
}
.sp-minus a, .sp-plus a {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 5px;
}
</style>

(by the way this code works only when I put the jquery to console,else it does not work.

So when I click plus, it should add 1 to input's value (example: if value of input it 1, it should 2 but it makes it 11)

How can I fix that? Thanks

_“ if value of input it 1, it should 2 but it makes it 11”_ - so you want to _add_, but instead it is _appending_ ... and that is not enough for you to come up with a simple google query such as https://www.google.com/search?q=javascript+addition+append …? — CBroe, Aug 11 '17 at 11:23
The value from `$('.quntity-input').val();` is a string so you end up concatenating 1 to string "1" which gives you result "11". You can cast the old to number by using parseInt. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt — Miro, Aug 11 '17 at 11:23

Mihai Alexandru-Ionut · Accepted Answer · 2017-08-11T11:44:54.040

You have to force the result to number, using unary operator.

var $plus = +$old + 1;

Another solution is to use parseInt method.

var $plus =parseInt($old,10) + 1;

Solution

$('.ddd-plus').click(function(){
        var $old = $('.quntity-input').val();
        var $plus =+$old +1;
        $('input').val($plus);
    });
$('.ddd-minus').click(function(){
        var $old = $('.quntity-input').val();
        var $plus =$old -1;
        if($plus<0){
          return;
        }
        $('input').val($plus);
});

.sp-quantity {
    width:124px;
    height:42px;
    font-family:"ProximaNova Bold", Helvetica, Arial;
}
.sp-minus {
    width:40px;
    height:40px;
    border:1px solid #e1e1e1;
    float:left;
    text-align:center;
}
.sp-input {
    width:40px;
    height:40px;
    border:1px solid #e1e1e1;
    border-left:0px solid black;
    float:left;
}
.sp-plus {
    width:40px;
    height:40px;
    border:1px solid #e1e1e1;
    border-left:0px solid #e1e1e1;
    float:left;
    text-align:center;
}
.sp-input input {
    width:30px;
    height:34px;
    text-align:center;
    font-family:"ProximaNova Bold", Helvetica, Arial;
    border: none;
}
.sp-input input:focus {
    border:1px solid #e1e1e1;
    border: none;
}
.sp-minus a, .sp-plus a {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sp-quantity">
        <div class="sp-minus fff"> <a class="ddd-minus" href="#">-</a></div>
        <div class="sp-input">
            <input type="text" class="quntity-input" value="1">
        </div>
        <div class="sp-plus fff"> <a class="ddd-plus" href="#">+</a></div>
    </div>

Thanks, now I'm wondering why I have to put code to console to make it work? It don't seem to do anything when I don'^t.. — Berkay Gunduz, Aug 11 '17 at 11:25
@BerkayGunduz, have a look to my code. I complete it with minus button click. — Mihai Alexandru-Ionut, Aug 11 '17 at 11:27

Yosvel Quintero · Answer 2 · 2017-08-12T07:10:46.030

You can use the Unary plus (+) operator .

The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already.

Unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number.

Code:

var $input = $('input'),
    val = +$input.val();

$('.ddd-plus').click(function() {
  $input.val(++val);
});

$('.ddd-minus').click(function() {
  val && $input.val(--val);
});

.sp-quantity {width:124px;height:42px;font-family:"ProximaNova Bold", Helvetica, Arial;}
.sp-minus {width:40px;height:40px;border:1px solid #e1e1e1;float:left;text-align:center;}
.sp-input {width:40px;height:40px;border:1px solid #e1e1e1;border-left:0px solid black;float:left;}
.sp-plus {width:40px;height:40px;border:1px solid #e1e1e1;border-left:0px solid #e1e1e1;float:left;text-align:center;}
.sp-input input {width:30px;height:34px;text-align:center;font-family:"ProximaNova Bold", Helvetica, Arial;border: none;}
.sp-input input:focus {border:1px solid #e1e1e1;border: none;}
.sp-minus a, .sp-plus a {display: block;width: 100%;height: 100%;padding-top: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="sp-quantity">
  <div class="sp-minus fff">
    <a class="ddd-minus" href="#">-</a>
  </div>
  <div class="sp-input">
    <input type="text" class="quntity-input" value="1">
  </div>
  <div class="sp-plus fff">
    <a class="ddd-plus" href="#">+</a>
  </div>
</div>

score 0 · Answer 3 · answered Aug 11 '17 at 11:23

$('.quntity-input').val() return string and you need to convert input values to number,

var $old = Number($('.quntity-input').val());

So your code should be,

$('.ddd-plus').click(function(){
    var $old = Number($('.quntity-input').val());
    var $plus =($old +1);
    // var $minus = $old - 1;
    $('input').val($plus);
    console.log($plus,$old);
});

Make sure you check for isNaN because Number or parseInt will return NaN for invalid numbers

score 0 · Answer 4 · answered Aug 11 '17 at 11:36

0

Or use parseInt:

var $old = parseInt($('.quntity-input').val(), 10);

answered Aug 11 '17 at 11:36

Alexander Bolzhatov

278
3
12

Thank you so much for answer! – Berkay Gunduz Aug 11 '17 at 11:41

score 0 · Answer 5 · answered Aug 11 '17 at 11:48

Becuse you are using val() function of jquery, normally val() returns array containing value but if this not find anything it return null;

source:

http://api.jquery.com/val/

you can check your program from this link :

$('.ddd-plus').click(function() {
    var old = $('.quntity-input').val();
    var plus =(parseInt(old) +1);
    $('.quntity-input').val(plus);
});
$('.ddd-minus').click(function() {
    var old = $('.quntity-input').val();
    var plus =(parseInt(old) -1);
    $('.quntity-input').val(plus);
});

.sp-quantity {
  width: 124px;
  height: 42px;
  font-family: "ProximaNova Bold", Helvetica, Arial;
}

.sp-minus {
  width: 40px;
  height: 40px;
  border: 1px solid #e1e1e1;
  float: left;
  text-align: center;
}

.sp-input {
  width: 40px;
  height: 40px;
  border: 1px solid #e1e1e1;
  border-left: 0px solid black;
  float: left;
}

.sp-plus {
  width: 40px;
  height: 40px;
  border: 1px solid #e1e1e1;
  border-left: 0px solid #e1e1e1;
  float: left;
  text-align: center;
}
.sp-minus {
  width: 40px;
  height: 40px;
  border: 1px solid #e1e1e1;
  border-left: 0px solid #e1e1e1;
  float: left;
  text-align: center;
}

.sp-input input {
  width: 30px;
  height: 34px;
  text-align: center;
  font-family: "ProximaNova Bold", Helvetica, Arial;
  border: none;
}

.sp-input input:focus {
  border: 1px solid #e1e1e1;
  border: none;
}

.sp-minus a,
.sp-plus a {
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sp-quantity">
  <div class="sp-minus fff"> <a class="ddd-minus" href="#">-</a></div>
  <div class="sp-input">
    <input type="text" class="quntity-input" value="1">
  </div>
  <div class="sp-plus fff"> <a class="ddd-plus" href="#">+</a></div>
</div>

jQuery Math Don't work

5 Answers5