JS не получаю значение на экран от input=number при переключение кнопка плюс минус

Question

Помогите с кодом

Не могу получить значение из массива по номеру value в форме input=number, через кнопки + -(плюс минус) А если родными стрелками вверх вниз, то значение из массива получаю. Что не так?

Вот код:

<!-- Input Plus + Minus - -->
$(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;
  });
});

<!-- Value in Input-->

const massivDannyh = [
  { "value" : "1", "price" : "1000", "metr" : "5", "people" : "2" }, 
  { "value" : "2", "price" : "2000", "metr" : "10", "people" : "4"  },
  { "value" : "3", "price" : "3000", "metr" : "15", "people" : "6"  },
  { "value" : "4", "price" : "4000", "metr" : "20", "people" : "8"  },
  { "value" : "5", "price" : "5000", "metr" : "25", "people" : "10"  },
  { "value" : "6", "price" : "6000", "metr" : "30", "people" : "12"  },
];

window.onload = ()=>{

  const input = document.querySelector('#input');
  const price = document.querySelector('#price');
  const metr = document.querySelector('#metr');
  const people = document.querySelector('#people');

  input.addEventListener('keyup',event=>{
    handlerChange(event.target.value);
  })
  input.addEventListener('change',event=>{
    handlerChange(event.target.value);
  })

  const handlerChange = (value)=>{
    const item = massivDannyh.find(i=>i.value===value)
    price.textContent = item?item.price:'.';
    metr.textContent = item?item.metr:'.';
    people.textContent = item?item.people:'.';
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex justify-content-between number">
    <span class="minus fw-600 t-20">-</span>
    <input type="number" id="input" min="1" max="6" class="ipnut-circle my-auto" value="1">
    <span class="plus fw-600  t-20">+</span>
</div>

<div id="price">1</div>
<div id="metr">2</div>
<div id="people">2</div>

Так-же в редакторе: https://jsfiddle.net/synapse3/byf5ge3r/1/

Как сделать так, что бы переключая value кнопками плюс/минус = получать значение из массива

спасибо

Answer 1

jQuery событие change не запускает слушателей, добавленных с помощью addEventListener. Замените

$input.change();

на

$input[0].dispatchEvent(new Event('change'));

P.S. по-хорошему, всё надо делать либо на чистом js, либо на jquery

Answer 2

Не много подправил код

<!-- Input Plus + Minus - -->



<!-- Value in Input-->

const massivDannyh = [
  { "value" : 1, "price" : "1000", "metr" : "5", "people" : "2" }, 
  { "value" : 2, "price" : "2000", "metr" : "10", "people" : "4"  },
  { "value" : 3, "price" : "3000", "metr" : "15", "people" : "6"  },
  { "value" : 4, "price" : "4000", "metr" : "20", "people" : "8"  },
  { "value" : 5, "price" : "5000", "metr" : "25", "people" : "10"  },
  { "value" : 6, "price" : "6000", "metr" : "30", "people" : "12"  },
];

window.onload = ()=>{

  const input = document.querySelector('#input');
  const price = document.querySelector('#price');
  const metr = document.querySelector('#metr');
  const people = document.querySelector('#people');

  input.addEventListener('keyup',event=>{
    handlerChange(+event.target.value);
  })
  input.addEventListener('change',event=>{
    handlerChange(+event.target.value);
  })

  const handlerChange = (value)=>{
    const item = massivDannyh.find(i=>i.value===value);
    price.textContent = item?item.price:'.';
    metr.textContent = item?item.metr:'.';
    people.textContent = item?item.people:'.';
  }
  
  
  $('.minus').click(function() {
    let $input = $(this).parent().find('input');
    let count = parseInt($input.val()) - 1;    
    count = count < 1 ? 1 : count;
    $input.val(count);
    handlerChange(count);
  });
  
  $('.plus').click(function() {
    let $input = $(this).parent().find('input');
    let count = parseInt($input.val()) + 1;    
    count = count > 6 ? 6 : count;
    $input.val(count);
    handlerChange(count);
  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex justify-content-between number">
    <span class="minus fw-600 t-20">-</span>
    <input type="number" id="input" min="1" max="6" class="ipnut-circle my-auto" value="1">
    <span class="plus fw-600  t-20">+</span>
</div>

<div id="price">1</div>
<div id="metr">2</div>
<div id="people">2</div>

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

   handlerChange(count);

на $input[0].dispatchEvent(new Event('change'));

БЛОГ НА HUSL

JS не получаю значение на экран от input=number при переключение кнопка плюс минус

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