JS при умножение input и значение результат не показывается сразу

Question

Многими усилиями написал часть кода, которая считает общую сумму из input.value с постоянным значением, типа Цена.

То есть, при увеличении значения в input, происходит умножение на константу 2500 (цена) и получаем результат.

Это происходит только после того, как нажимаются кнопки "+", "-" или же после нажатия на input и изменения значения.

А мне нужно, что бы значение сразу показывалось, ведь минимальное значение у input, хотя бы = 1, или если даже значение у input value=5, на экране должен быть сразу результат равный = 12500 (5 * 2500).

$(document).ready(function() {
  $('.minus').click(function() {
    var $input = $(this).parent().find('input');
    var count = parseInt($input.val()) - 1;
    count = count < 1 ? 1 : count;
    $input.val(count);
    $input.change();
    return false;
  });
  $('.plus').click(function() {
    var $input = $(this).parent().find('input');
    $input.val(parseInt($input.val()) + 1);
    $input.change();
    return false;
  });
});

$(".sizeinput").on("change", sizeinput_input);

function sizeinput_input(e) {
  $("div.result").text(+this.value * +$("span.constanta").text());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="number">
  <span class="minus">-</span>
  <input class="sizeinput" type="text" value="5" />
  <span class="plus">+</span>
</div>

Цена: <span class="constanta">2500</span>

<div class="result"> </div>

Так же в редакторе: https://jsfiddle.net/synapse3/d13au9gv/13/

Помогите исправить мою ошибку. Спасибо.

Answer 1

onchange именно так и работает, как Вы описали. И заставить его работать по другому не получится никак.

Для того, результата, который Вам нужен, нужно добавить обработчик еще как минимум на onkeyup.

Там еще несколько событий надо перехватывать, но сейчас я уже не вспомню все. Начните с onkeyup, потом еще добавите, когда поймете, чего не хватает.

Answer 2

Инициируйте событие ввода для input, чтобы функция отработала при запуске:

$('.minus').click(function() {
  let $input = $(this).parent().find('input');
  let count = parseInt($input.val()) - 1;
  count = count < 1 ? 1 : count;
  $input.val(count);
  $input.change();
  return false;
});
$('.plus').click(function() {
  let $input = $(this).parent().find('input');
  $input.val(parseInt($input.val()) + 1);
  $input.change();
  return false;
});

$(".sizeinput").on("change input", sizeinput_input);

function sizeinput_input(e) {
  $("div.result").text(+this.value * +$("span.constanta").text());
}
$(".sizeinput").trigger('input');

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="number">
  <span class="minus">-</span>
  <input class="sizeinput" type="text" value="5" />
  <span class="plus">+</span>
</div>

Цена: <span class="constanta">2500</span>

<div class="result"> </div>

БЛОГ НА HUSL

JS при умножение input и значение результат не показывается сразу

Ответы (2 шт):