<div class="quantity">
<input type="number" id="id644" name="quantity" value="1" title="Кол-во" size="4" min="1" max="" step="1" inputmode="numeric" autocomplete="off">
</div>
function transformNumberBtn() {
let boxQuantity = document.querySelector('.quantity');
let numInit = document.querySelector('.quantity > input');
let i = 1;
let btnBoxInit = document.createElement("div");
let btnBox = `
<div class="btnBox">
<button class="btn_plus">+</button>
<span class="btn_result">1</span>
<button class="btn_minus">-</button>
</div>
`;
btnBoxInit.innerHTML = btnBox;
boxQuantity.appendChild(btnBoxInit);
let btnPlus = document.querySelector('.btn_plus');
let btnResult = document.querySelector('.btn_result');
let btnMinus = document.querySelector('.btn_minus');
btnPlus.addEventListener('click', () => {
numInit.value = ++i;
btnResult.innerHTML = numInit.value;
})
btnMinus.addEventListener('click', () => {
numInit.value = --i;
btnResult.innerHTML = numInit.value;
})
}
transformNumberBtn();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.