Javascript Приращивание значения

Question

Я попытался и не смог попытаться заставить это работать, поэтому попросите экспертов.

У меня есть следующий 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> 

Использование JavaScript (JQuery конкретный штраф) я должен быть в состоянии иметь это так, что, когда кто-то нажимает на кнопку плюс, номер внутри .newprice div увеличивается на 20. Аналогично, когда они нажимают кнопку «минус», число уменьшается на 20.

То же самое происходит, если они используют маленькие стрелки вверх/вниз в поле .input-text.

Или, если они вводят значение вместо какой-либо из кнопок, тогда число в div .input-text соответственно изменяется (если кто-то набрал 3, номер текстового текста изменится на 60).

PS: если проще, то .newprice div может быть текстовым полем. Что бы ни работало.

[Чтобы сделать это все в контексте, в основном его часть корзины покупок, но я пытаюсь показать пользователю, сколько они будут платить за продукт, когда они вводят количество. Например, продукт стоит 20 долларов США, и если они хотят 3 из них, они смогут сразу увидеть (до добавления в свою корзину), что это обойдется им в 60 долларов.]

Надеюсь, я объяснил это правильно ,

Заранее спасибо.

Answer 1

Я уже добавить некоторые вычисления и HTML для обработки основной цены.См 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 по 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(); 
    }); 
}); 

Давайте мне знать, если вам нужна поддержка.

Answer 2

Вы можете это сделать.

// 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()); 
}); 

Редактировать на основе комментариев

// 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()); 
}); 

Для увеличения входного числа на 20, добавьте атрибут step как так. Число в этом атрибуте показывает, сколько значение будет увеличиваться при каждом нажатии кнопок вверх и вниз.

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

Answer 3

Вы можете сделать ...

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

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

с этим HTML ...

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

Для записи, вы должны определенно использовать вход для счетчика элемента ,

Answer 4

Вот ваш чистый пример JS, но я верю, что поймаю что-нибудь ниже IE9, вам также придется присоединить слушателей событий.

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