кнопка с увеличением с функцией уменьшения на единицу html с ограничением количества

Question

Итак, я новичок в html и хотел бы знать, как я могу сделать кнопку с функцией увеличения и уменьшения (- / +)

в целом должно выглядеть так

<button>-</button>
<input type="number"  min="0"
input type="number"  max="20">
<button>+</button>

(действительно простой пример), но единственное, что мне удалось получить, это этот ввод. потерял команду, так что ... если кто-то придумает, как сделать ее длиннее и ... главная задача ... я буду очень хорошо выполнен! (кнопка должна увеличиваться и уменьшаться на 1 и -1)

Answer 1

Вы можете сделать это, присвоив входу идентификатор и выбрав его из функции onclick кнопки (используя querySelector). Затем используйте тернарный оператор для условного присвоения значения.

<button onclick="document.querySelector('#steve').value=parseInt(document.querySelector('#steve').value)<1?parseInt(document.querySelector('#steve').value):parseInt(document.querySelector('#steve').value)-1"">-</button>
<input type="number" id="steve" min="0" max="20" value=0>
<button onclick="document.querySelector('#steve').value=parseInt(document.querySelector('#steve').value)>19?parseInt(document.querySelector('#steve').value):parseInt(document.querySelector('#steve').value)+1">+</button>