Как сделать кнопки + и — для edit?

Question

[ravlex]

Есть вот такая структура формы, содержит поле edit и по бокам кнопки плюс и минус:

<form action="">
  <div class="pole">
    <span class="minus">
<button type="button"></button>
</span>
    <input type="text" value="1">
    <span class="plus">
<button type="button"></button>
</span>
  </div>
</form>

Нужно чтобы по клике на кнопку + прибавлялось значение на 1, при минус - наоборот. Как это сделать?

Answer 1

[zooks]

Нативное решение:

<input type="number" name="items" min="1" max="10">

Answer 2

[Игорь]

Как это сделать?

var pole      = document.querySelector('.pole'); //Цепляем наш form.
var inputText = document.querySelector('.inputText').value; //Цепляем Input значение которое в нем сейчас,в этой же переменной будем хранить увеличенное или уменьшенное значение
var elemInp   = document.querySelector('.inputText'); //Цепляем сам элемент Input .
    
    pole.addEventListener('click',function(event){ //Ставим прослушку события клика на From,куда не кликни на From вызовется эта функция
        
        var target=event.target; //Событие target получает элемент на который был осуществлен клик. 
        
        var minus= target.parentElement.classList.contains('minus'); //Сначала пишем target,в нем хранится элемент на который был осуществлен клик ,далее  parentElement ,потому что target вернет самый глубокий элемент а это Bottom, мы от него поднимаемся к его родителю span, далее метод contains он дат <code lang="javascript">
true
</code> or <code lang="javascript">
false
</code>,если есть такой класс у этого элемента,то есть мы здесь определяем что был осущетсвлен клик именно на элемент minus 
        var plus = target.parentElement.classList.contains('plus');
       
       
        
        if(minus && inputText>=1 ){ --inputText; elemInp.value=inputText;} //делаем проверку условие сработает если был клик на нужный элемент (minus переменная вернет тру или фалс) и чтобы значение инпута было не ниже нуля,а внутри мы сначала у значения инпута снимаем -1 ,a затем записываем новое значение в сам инпут.
        if(plus){ ++inputText; elemInp.value=inputText;}
        
     
      
      
},false);

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

Держи рабочий код с твоей версткой

Answer 3

[Roman]

Из другого вопроса: https://jsfiddle.net/7hbwxhoy/