увеличение value input-а при клике на button

171

22 августа 2018, 17:00

Допустим у нас имеется много input-ов и кнопок увеличения и уменьшения значения. Подскажите скрипт, чтобы при нажатии на кнопки изменялся value из того же блока. Желательно без стрелочных функций

<div> 
  <button class="decrease" type="button">-</button> 
  <input type="text" name="field" value="10" /> 
  <button class="increase" type="button">+</button> 
</div> 
<div> 
  <button class="decrease" type="button">-</button> 
  <input type="text" name="field" value="20" /> 
  <button class="increase" type="button">+</button> 
</div> 
<div> 
  <button class="decrease" type="button">-</button> 
  <input type="text" name="field" value="30" /> 
  <button class="increase" type="button">+</button> 
</div> 
<div> 
  <button class="decrease" type="button">-</button> 
  <input type="text" name="field" value="40" /> 
  <button class="increase" type="button">+</button> 
</div>

Answer 1

document.addEventListener('click', function (e) { 
  if (e.target.classList.contains("increase")) { 
    ++e.target.parentElement.querySelector("input").value; 
  } else if (e.target.classList.contains("decrease")) { 
    --e.target.parentElement.querySelector("input").value; 
  } 
})

<div> 
  <button class="decrease" type="button">-</button> 
  <input type="text" name="field" value="10" /> 
  <button class="increase" type="button">+</button> 
</div> 
<div> 
  <button class="decrease" type="button">-</button> 
  <input type="text" name="field" value="20" /> 
  <button class="increase" type="button">+</button> 
</div> 
<div> 
  <button class="decrease" type="button">-</button> 
  <input type="text" name="field" value="30" /> 
  <button class="increase" type="button">+</button> 
</div> 
<div> 
  <button class="decrease" type="button">-</button> 
  <input type="text" name="field" value="40" /> 
  <button class="increase" type="button">+</button> 
</div>

Answer 2

можно так:

Array.prototype.forEach.call(document.querySelectorAll('.decrease'), function (v) { 
        v.addEventListener('click', dec); 
    }) 
 
    Array.prototype.forEach.call(document.querySelectorAll('.increase'), function (v) { 
        v.addEventListener('click', inc); 
    }) 
 
    function dec() { 
        var div = this.parentElement; 
        var input = div.children.item(1) 
        input.setAttribute('value', (parseInt(input.getAttribute('value')) - 1).toString()); 
    } 
 
    function inc() { 
        var div = this.parentElement; 
        var input = div.children.item(1) 
        input.setAttribute('value', (parseInt(input.getAttribute('value')) + 1).toString()); 
    }

<div> 
    <button class="decrease" type="button">-</button> 
    <input type="text" name="field" value="10"/> 
    <button class="increase" type="button">+</button> 
</div> 
<div> 
    <button class="decrease" type="button">-</button> 
    <input type="text" name="field" value="20"/> 
    <button class="increase" type="button">+</button> 
</div> 
<div> 
    <button class="decrease" type="button">-</button> 
    <input type="text" name="field" value="30"/> 
    <button class="increase" type="button">+</button> 
</div> 
<div> 
    <button class="decrease" type="button">-</button> 
    <input type="text" name="field" value="40"/> 
    <button class="increase" type="button">+</button> 
</div>

Answer 3

что-нибудь такое подойдёт?

let increase = $('.increase');
increase.on('click', function(){
   $(this).prev().val(parseInt($(this).prev().val()) + 1);
})
let decrease = $('.decrease');
decrease.on('click', function(){
   $(this).next().val(parseInt($(this).next().val()) - 1);
})