Javascript increment a value

Question

I have tried and failed trying to get this to work so time to ask the experts.

I've got the following HTML:

<input type="button" value="-" class="minus">
<input type="number" value="20" class="input-text">
<input type="button" value="+" class="plus">

<div class="newprice">
    20
</div>

Using javascript (jQuery specific is fine) I need to be able to have it so that when someone clicks the plus button, the number inside the .newprice div gets incremented by 20. Likewise when they hit the minus button the number gets decreased by 20.

Also the same goes for if they use the little up/down arrows on the .input-text field.

Or if they type in a value instead of using any of the buttons, then the number in the .input-text div changes accordingly (if someone typed in 3, the .input-text number would change to 60).

PS: if it's easier the .newprice div can be an text field instead. Whatever works.

[To put this all into context, basically its part of a shopping cart but I am trying to show the user how much they will be paying for the product when they enter a quantity. For example, the product costs $20, and if they want 3 of them they will be able to see straight away (before adding to their cart) that this is going to cost them $60.]

I hope I explained it properly.

Thanks in advance.

What code did you try?

jfriend00
– jfriend00

2013-05-30 03:43:03 +00:00
Commented May 30, 2013 at 3:43 — jfriend00
– jfriend00, Commented May 30, 2013 at 3:43
the input-text is quantity or the basic price of product.

JamesN
– JamesN

2013-05-30 03:56:03 +00:00
Commented May 30, 2013 at 3:56 — JamesN
– JamesN, Commented May 30, 2013 at 3:56

Austin Brunkhorst · Accepted Answer · 2013-05-30 15:08:52Z

4

You can do this.

// how many to increment each button click
var increment = 20;

$('.plus, .minus').on('click', function() {
    // the current total
    var total = parseInt($('#newprice').text());

    // increment the total based on the class
    total += (this.className == 'plus' ? 1 : -1) * increment;

    // update the div's total
    $('#newprice').text(total);
    // update the input's total
    $('.input-text').val(total);
});

$('.input-text').on('change', function() {
    // update the div's total
    $('#newprice').text( $(this).val() );
});

Edit based on comments

// how many to increment each button click
var increment = 20;

$('.plus, .minus').on('click', function() {
    // the current total
    var total = parseInt($('#newprice').text());

    // increment the total based on the class
    total += (this.className == 'plus' ? 1 : -1) * increment;

    // update the div's total
    $('#newprice').text(total);
});

$('.input-text').on('change', function() {
    // update the div's total
    $('#newprice').text( $(this).val() );
});

To increment the number input by 20, add the attribute step like so. The number in that attribute represents how much the value will be incremented each time the up and down buttons are pressed.

<input type="number" value="20" step="20" class="input-text">

edited May 30, 2013 at 15:08

answered May 30, 2013 at 3:47

Austin Brunkhorst

21.1k6 gold badges49 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gideon Over a year ago

hey this is pretty slick! :)

FireCrakcer37 Over a year ago

+1 for the ternary operator.

Miker Over a year ago

Very close! When you click the + or - buttons though, only the value inside the #newprice div should change. And when you use the small up/down arrows in the number input, the value inside the #newprice div should increment by 20.

JamesN · Accepted Answer · 2013-05-31 02:56:09Z

1

I already add some calculation and html for handle the basic price. See demo in jsfiddle

HTML:

Price per item:<input name="basicPrice" value="20" class="input-text">
<br />
<input type="button" value="-" class="minus">
<input name="quantity" id="quantity" type="number" value="1"  class="input-text">
<input type="button" value="+" class="plus">
<br />Money much pay:
<span class="newprice">20</span>

JS by jquery :

function calculate(){
    var basicPrice = parseInt($(":input[name='basicPrice']").val());
    var quantity = parseInt($(":input[name='quantity']").val());
    console.log(quantity);
    var total = basicPrice * quantity;
    $(".newprice").text(total);
}
function changeQuantity(num){
    $(":input[name='quantity']").val( parseInt($(":input[name='quantity']").val())+num);
}
$().ready(function(){
    calculate();
    $(".minus").click(function(){
        changeQuantity(-1);
        calculate();
    });
    $(".plus").click(function(){
        changeQuantity(1);
        calculate();
    });
    $(":input[name='quantity']").keyup(function(e){
        if (e.keyCode == 38) changeQuantity(1);
        if (e.keyCode == 40) changeQuantity(-1);
        calculate();
    });
      $(":input[name='basicPrice']").keyup(function(e){
        calculate();
    });
    var quantity = document.getElementById("quantity");
    quantity.addEventListener("input", function(e) {
        calculate();
    });
});

Let's me know if you need any support.

edited May 31, 2013 at 2:56

answered May 30, 2013 at 4:15

JamesN

3871 silver badge10 bronze badges

2 Comments

Miker Over a year ago

Thanks James. This is very close. The input with class="input-text" is supposed to be a number type (type="number") but when I do that the small up/down arrows don't do anything. Also for some strange reason when I implement your solution into my web page the plus and minus buttons make the "input-text" field NOT go up one at a time. For example, if the value was 1 instead of 20, and you hit the plus button, it would then become 3. Hit it again and it would become 5. I'm not sure why that is happening. Any suggestions would be helpful.

JamesN Over a year ago

yes. when the item that have class="input-text" have type="number". We must add a handler for oninput event (that's only available on HTML5). I edited my post and my demo in jsfiddle jsfiddle.net/james_nguyen/3T7fD/4

Bill Criswell · Accepted Answer · 2013-05-30 04:16:38Z

1

You can do...

var $counter = $('.counter');

$('button').on('click', function(){
  var $button = $(this);
  $counter.text(function(i,val){
    return +val + ( $button.hasClass('up') ? 1 : - 1 );
  });
});

with this HTML...

<div class="counter">10</div>
<button class="down">-</button>
<button class="up">+</button>

For the record, you should definitely be using an input for the counter element.

edited May 30, 2013 at 4:16

answered May 30, 2013 at 3:53

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

Comments

d3c0y · Accepted Answer · 2013-05-30 05:40:26Z

1

Here's your pure JS example but I believe to catch anything below IE9 you'll have to attach event listeners as well.

jsFiddle

<form>
   <input type="button" id="value-change-dec" value="-">
   <input type="text" id="new-price" value="0" disabled>
   <input type="button" id="value-change-inc" value="+">
   <br>
   <input type="number" id="change-price">
</form>

document.getElementById("value-change-dec").addEventListener("click", function() {
    var value = parseInt(document.getElementById('new-price').value);
    value=value-20;
    document.getElementById('new-price').value = value;
});

document.getElementById("value-change-inc").addEventListener("click", function() {
    var value = parseInt(document.getElementById('new-price').value);
    value=value+20;
    document.getElementById('new-price').value = value;
});

function changeIt() {
    document.getElementById('new-price').value = document.getElementById('change-price').value*20;
}

var changer = document.getElementById('change-price');
changer.addEventListener('keydown', changeIt, false);
changer.addEventListener('keyup', changeIt, false);
changer.addEventListener('click', changeIt, false);

edited May 30, 2013 at 5:40

answered May 30, 2013 at 4:03

d3c0y

9827 silver badges13 bronze badges

1 Comment

d3c0y Over a year ago

Doh! Just noticed you want the user to be able to enter the amount multiplier via a text input as well, will update here in a sec.

Collectives™ on Stack Overflow

Javascript increment a value

4 Answers 4

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related