I wrote a script but it does not work, I would appreciate it if you counter-elem__plus where you made a mistake, when you click counter-elem__plus number increases by 1 and when counter-elem__minus drop 1

  var splashVal = document.querySelector(".splash-input").value; var count = 0; document.querySelector(".counter-elem__plus").onclick = function() { count += parseFloat(splashVal + 1); splashVal = count; } document.querySelector(".counter-elem__minus").onclick = function() { if (count > 1) { count += parseFloat(splashVal - 1); splashVal = count; } } 
 <input type="text" class="counter-elem__input splash-input" value="5"> <div class="counter-elem__arrow counter-elem__plus"></div> <div class="counter-elem__arrow counter-elem__minus"></div>

    2 answers 2

    The problem is that you do not assign a new value to an input. Apparently, you want to do it this way. splashVal = count; . But here count is just a variable. She in no way refers to the input itself. You just increased it and that's it. Maybe so?

     var splashInput = document.querySelector(".splash-input"); var splashVal = parseFloat(splashInput.value); document.querySelector(".counter-elem__plus").onclick = function() { splashInput.value = ++splashVal; } document.querySelector(".counter-elem__minus").onclick = function() { if (splashVal > 1) { splashInput.value = --splashVal; } } 
     div { cursor: pointer; } 
     <input type="text" class="counter-elem__input splash-input" value="5"> <div class="counter-elem__arrow counter-elem__plus">Up</div> <div class="counter-elem__arrow counter-elem__minus">Down</div>

    PS
    Just below the unit should not fall? Maybe mean below zero?

      document.querySelector(".splash-input").value returns a string. You need to bring it to the number type, so that the + operation is performed not as a concatenation of strings, but as an addition of numbers.

       var splashVal = parseInt(document.querySelector(".splash-input").value, 10);