Ошибка счетчика при изменении значения поля ввода

Question

Есть поле для ввода цифр и кнопки для увеличения и уменьшения его значения. Они работают со значением по умолчанию, но если пользователь принудительно вводит какое-либо число, значение не обновляется после нажатия кнопок. Подскажите, в чем может быть проблема, на что обратить внимание?

<div class="element">
    <button class="decrement" id="decrement" onclick="number_counter(this)">-</button>
    <input type="number" name="" id="parameter" value="10">
    <button class="increment" id="increment" onclick="number_counter(this)">+</button>
</div>
<script>

    const coefficient_input = document.getElementById('parameter');

    coefficient_input.addEventListener("change", (event) => {
        current_value = event.target.value;
        coefficient_input.setAttribute('value', current_value);
        console.log(current_value);
    });

    function number_counter(button) {
        let id = button.getAttribute('id');
        let step = 0.01;

        coefficient_input.addEventListener("change", (event) => {
            current_value = event.target.value;
            coefficient_input.setAttribute('value', current_value);
            console.log(current_value);
        });

        switch(id) {
            case 'increment':
                let increment = (parseFloat(coefficient_input.getAttribute('value')) + step).toFixed(2) ;
                coefficient_input.setAttribute('value', increment);
                break;
            case 'decrement':
                let decrement = (parseFloat(coefficient_input.getAttribute('value')) - step).toFixed(2);
                coefficient_input.setAttribute('value', decrement);
                break;
    }
}
</script>

Answer 1

Убираем лишние обработчики.
Нужные значения передаем напрямую в свойство элемента.

const coefficient_input = document.getElementById('parameter');
let step = 0.01;

function number_counter(iter) {
    switch(iter) {
        case 'increment':
            coefficient_input.value = (+coefficient_input.value + step).toFixed(2);
            break;
        case 'decrement':
            coefficient_input.value = (+coefficient_input.value - step).toFixed(2);
            break;
    }
}

<div class="element">
    <button class="decrement" id="decrement" onclick="number_counter('decrement')">-</button>
    <input type="number" name="" id="parameter" value="10">
    <button class="increment" id="increment" onclick="number_counter('increment')">+</button>
</div>

Answer 2

parseFloat(coefficient_input.getAttribute('value'))

Не надо использовать атрибуты вместо свойств.

+coefficient_input.value

coefficient_input.addEventListener("change", (event) => {

А этот обработчик вообще выкинуть.

И если понадобится, то подписываться на input, а не change.

Answer 3

Предложу свой вариант ответа,на рассмотрение с небольшим рефакторингом, код прокоментировал JS и HTML, объясняя почему он написан именно так а не иначе. Причины ошибки указаны и в других ответах.

Существующие имена для простоты восприятия не менял, но в JS используется не кебаб_стиль а камелКейс.

const STEP = 0.01 // для гибкости кода удобнее использовать константы
let value = 10 // данные храним в переменных не DOM дереве

const coefficient_input = document.getElementById('parameter');
coefficient_input.step = STEP

// заполняем данными DOM дерево и избегаем дублирования кода
function updateDOM(){
  coefficient_input.value = value.toFixed(2)      
}

// управляем событиями из js (HTML для верстки, она может поменяться)
[ document.getElementById('increment'),
  document.getElementById('decrement') ]
    .forEach(btn => btn.onclick = number_counter)


coefficient_input.addEventListener("change", (event) => {
    value = +event.target.value; // не забываем что аттрибуты HTML это строки
});

function number_counter({target:{id}}) {
    switch(id) {
        case 'increment':
            value += STEP // меняем значение
            break;
        case 'decrement':
            value -= STEP // меняем значение
            break;
    }
    updateDOM() // обновляем значение в DOM
}

updateDOM() // инициируем значение

<!-- только верстка и значимые аттибуты такие как классы имена и id -->
<div class="element">
    <button class="decrement" id="decrement">-</button>
    <input type="number" name="" id="parameter">
    <button class="increment" id="increment">+</button>
</div>

БЛОГ НА HUSL

Ошибка счетчика при изменении значения поля ввода

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