После достижения минимального значения Input, при нажатии на + число не растет

Question

Такая проблема, есть задание при клике на + к значения инпута должно прибавлять рандомное значение от 1 до 10, при клике на - соответственно вычитаться. При этом минимальное значение не должно падать меньше 1, если упадет меньше 1 валуе инпута должно равняться 1. Сделал как смог, однако когда значение достигается 1 при нажатии на + оно не растет.

    function randomInteger(min, max) {
          let rand = min - 0.5 + Math.random() * (max - min + 1);
          return Math.round(rand);
        }
         
        const a = ( randomInteger(1, 10));
        
            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')) - a).toString());
            }
        
            function inc() {
                var div = this.parentElement;
                var input = div.children.item(1)
                input.setAttribute('value', (parseInt(input.getAttribute('value')) + a).toString());
            }
        
        
          var addTime = document.getElementById('add');
          addTime.addEventListener('click', getN);
        
         function getN() {
          var getNum = document.querySelector('.arci').value;
          if (getNum < 1) {
             document.querySelector('.arci').value = 1;
          }
        }

<div>
      <button class="decrease" type="button" id="add">-</button>
      <input type="text"  name="field" class="arci" value="10" />
      <button class="increase" type="button" >+</button>
    </div>

Answer 1

Нужно писать не через setAttribute, а просто input.value, и функцию рандома нужно вызывать при клике, иначе рандом работать будет некорректно. У вас сейчас в начале формируется рандомное значение, записывается в переменную "а", и больше оно не изменится, только после перезагрузки страницы будет сформировано новое рандомное значение.

function randomInteger(min, max) {
                let rand = min - 0.5 + Math.random() * (max - min + 1)
                return Math.round(rand)
            }

            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.value = parseInt(input.value) - randomInteger(1, 10)
            }

            function inc() {
                var div = this.parentElement
                var input = div.children.item(1)
                input.value = parseInt(input.value) + randomInteger(1, 10)
            }

            var addTime = document.getElementById('add')
            addTime.addEventListener('click', getN)

            function getN() {
                var getNum = document.querySelector('.arci').value
                if (getNum < 1) {
                    document.querySelector('.arci').value = 1
                }
            }

<div>
    <button class="decrease" type="button" id="add">-</button>
    <input type="text" name="field" class="arci" value="10" />
    <button class="increase" type="button">+</button>
</div>

Answer 2

Если я правильно понял вопрос то вот решения , но с использованием ES6.

let arci = document.querySelectorAll(".arci")[0];
let random;
        
document.querySelector(".increase").addEventListener("click", () => {
random = Math.floor(Math.random() * 10) + 1;
arci.value = +arci.value + random;
})
        
document.querySelector(".decrease").addEventListener("click", () => {
random = Math.floor(Math.random() * 10) + 1;
arci.value = +arci.value - random;
if (arci.value <= 1) { arci.value = 1 }
})

<div>
  <button class="decrease" type="button" id="add">-</button>
  <input type="text"  name="field" class="arci" value="10" />
  <button class="increase" type="button" >+</button>
</div>

БЛОГ НА HUSL

После достижения минимального значения Input, при нажатии на + число не растет

Ответы (2 шт):