Javascript increment a value

问题:

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.

回答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.

回答2:

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">

回答3:

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.

回答4:

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);