Как внедрить cтилизованный input number в другой скрипт?
Почему не работает стилизованный input с js кодом расчета на + и -? Работает только с клавиатуры.
//Расчет, умножение
window.addEventListener('load', () => {
const multiplyInput = document.querySelector('#multiply');
const resultElements = document.querySelectorAll('.result');
resultElements.forEach(item => {
item.setAttribute('data-default-count', item.innerText);
});
const calcData = () => {
resultElements.forEach(item => {
item.innerText = item.getAttribute('data-default-count') * multiplyInput.value;
});
}
calcData();
multiplyInput.addEventListener('input', calcData)
})
/////////////////// product +/-
$(document).ready(function() {
$('.num-in span').click(function () {
var $input = $(this).parents('.num-block').find('input.in-num');
if($(this).hasClass('minus')) {
var count = parseFloat($input.val()) - 1;
count = count < 1 ? 1 : count;
if (count < 2) {
$(this).addClass('dis');
}
else {
$(this).removeClass('dis');
}
$input.val(count);
}
else {
var count = parseFloat($input.val()) + 1
$input.val(count);
if (count > 1) {
$(this).parents('.num-block').find(('.minus')).removeClass('dis');
}
}
$input.change();
return false;
});
});
// product +/-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div class="num-block skin-2">
<div class="num-in">
<span class="minus dis">-</span>
<input id="multiply" type="text" class="in-num" value="1"> <span class="plus">+</span>
</div>
</div>
<div class="result">3</div>
<div class="result">4</div>
<div class="result">6</div>
<div class="result">7</div>
</form>