Как создать итог с помощью кнопок плюс минус и поля ввода

Я пытаюсь сделать калькулятор цен, где 1 сотрудник = 21 доллар в месяц. Есть два способа установить количество сотрудников. Я хотел бы использовать знак плюса и минуса для регулировки количества, а также иметь поле ввода, где они могут вводить количество. Регулировка любого из них мгновенно обновит итоговую сумму. В моем прикрепленном коде вы увидите, что ввод числа в поле ввода работает правильно, но использование знаков «плюс» и «минус» не приводит к корректировке суммы. Это изменяет число, но математические вычисления не выполняются. У кого-нибудь есть идеи? Спасибо!

var $buttonPlus = $('.increase-btn');
var $buttonMin = $('.decrease-btn');
var $quantity = $('.quantity');
/*For plus and minus buttons*/
$buttonPlus.click(function(){
  $quantity.val( parseInt($quantity.val()) + 1 );
});
$buttonMin.click(function(){
  $quantity.val( parseInt($quantity.val()) - 1 );
});

/*For total*/
$(document).ready(function(){
	$(".checkout").on("keyup", ".quantity", function(){
		var price = +$(".price").data("price");
		var quantity = +$(this).val();
		$("#total").text("$" + price * quantity);
	})
})

  .checkout {
	height: 300px;
	width: 400px;
	margin: 20px auto;
	border: 2px solid black;
	text-align: center;
}

<head>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class = "checkout">
<h1 class = "title">Checkout</h1>
  <p class = "price" data-price = "21">$21 per month</p>  
  <p class = "description">Quantity:</p>  
  <button type = "button" class = "decrease-btn">-</button>  
  <input type = "text" class = "quantity" value = "1"> 
  <button type = "button" class = "increase-btn">+</button>	  
  <p class = "total">Total: <span id = "total">$21</span></p>
</div>

javascript jquery html

09.01.2019 22:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

3 278

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Измените событие на 'input', чтобы оно срабатывало только при изменении фактического значения
Добавьте trigger('input') в конец изменения значения, чтобы событие генерировалось (изменения логического значения не генерируют события).
Переместите первые привязки в документ, готовый к сохранности (необязательное изменение).
Поместите Math.max() вокруг вычитания, чтобы отрицательное значение не могло стать меньше нуля. (необязательное изменение)

/*For total*/
$(document).ready(function() {
  $(".checkout").on("input", ".quantity", function() {
    var price = +$(".price").data("price");
    var quantity = +$(this).val();
    $("#total").text("$" + price * quantity);
  })

  var $buttonPlus = $('.increase-btn');
  var $buttonMin = $('.decrease-btn');
  var $quantity = $('.quantity');
  
  /*For plus and minus buttons*/
  $buttonPlus.click(function() {
    $quantity.val(parseInt($quantity.val()) + 1).trigger('input');
  });
  
  $buttonMin.click(function() {
    $quantity.val(Math.max(parseInt($quantity.val()) - 1, 0)).trigger('input');
  });
})

.checkout {
  height: 300px;
  width: 400px;
  margin: 20px auto;
  border: 2px solid black;
  text-align: center;
}

<head>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class = "checkout">
  <h1 class = "title">Checkout</h1>
  <p class = "price" data-price = "21">$21 per month</p>
  <p class = "description">Quantity:</p>
  <button type = "button" class = "decrease-btn">-</button>
  <input type = "text" class = "quantity" value = "1">
  <button type = "button" class = "increase-btn">+</button>
  <p class = "total">Total: <span id = "total">$21</span></p>
</div>

Большое спасибо! Меня смущает, сколько времени мне потребовалось, чтобы зайти так далеко. Ты мужчина!

— 09.01.2019 22:59

09.01.2019 22:55