修改输入框值后计数器失效问题排查求助

我有一个数字输入框及增减按钮，默认值下按钮可正常增减数值，但手动输入数字后，点击按钮无法更新输入框值。相关代码如下：

<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>

我尝试使用change事件监听器，手动修改输入框值后值会变化，但按钮功能仍失效，请问问题出在哪里？

• 错误混用HTML属性与DOM属性：getAttribute('value')读取的是HTML标签上的初始value属性，手动输入后输入框的DOM value属性已更新，但HTML属性不会自动同步。按钮点击时仍基于旧值计算，且setAttribute('value')无法更新输入框的显示内容，必须直接操作DOM元素的.value属性。
• 重复绑定事件监听器：每次点击按钮都会执行number_counter函数，该函数内又会给输入框新增一个change监听器，多次点击后同一事件会触发多次回调，导致逻辑混乱。
• 未声明变量：current_value未用let/const声明，会成为全局变量，可能引发意外的变量冲突。

<div class="element">
    <button class="decrement" id="decrement" onclick="number_counter(this)">-</button>
    <input type="number" name="" id="parameter" value="10" step="0.01">
    <button class="increment" id="increment" onclick="number_counter(this)">+</button>
</div>
<script>
    const coefficient_input = document.getElementById('parameter');
    // 只绑定一次change事件
    coefficient_input.addEventListener("change", (event) => {
        const current_value = event.target.value;
        console.log(current_value);
    });

    function number_counter(button) {
        const id = button.getAttribute('id');
        const step = 0.01;
        // 直接读取DOM的value属性
        let currentValue = parseFloat(coefficient_input.value);
        
        // 处理NaN情况（比如输入非数字内容）
        if (isNaN(currentValue)) {
            currentValue = 0;
        }

        switch(id) {
            case 'increment':
                coefficient_input.value = (currentValue + step).toFixed(2);
                break;
            case 'decrement':
                coefficient_input.value = (currentValue - step).toFixed(2);
                break;
        }
        // 手动触发change事件，确保回调执行
        coefficient_input.dispatchEvent(new Event('change'));
    }
</script>

关键改动说明 #

1. 直接操作DOM的.value属性：读取和设置输入框值都用coefficient_input.value，确保始终获取最新的用户输入值，且能实时更新显示。
2. 移除重复的事件绑定：将change监听器移到全局，只绑定一次，避免多次触发回调。
3. 声明变量：用const/let声明所有变量，避免全局污染。
4. 增加NaN处理：防止用户输入非数字内容时按钮功能失效。
5. 手动触发change事件：按钮修改值后主动触发change事件，确保原有的回调逻辑能执行。

内容的提问来源于stack exchange，提问作者Leonid Price