表单中JavaScript数字增减按钮失效问题排查求助

问题背景 #

我在HTML中编写了一个可提交数据至数据库的表单，原本包含7个type='number'的输入框，为适配移动端操作，改为搭配增减按钮的type='text'输入框，通过JavaScript实现数值增减逻辑。但该逻辑仅在移除<form>标签时正常工作，添加form标签后完全失效。

相关代码片段 #

HTML代码

<form action="" method="post">
    <label>Test1</label><br>
    <input type="button" onclick="dec('number')" id="dec" value="-"/>
    <input type="text" name="test1" id="number" value="0" min="0" size="3" />
    <input type="button" onclick="inc('number')" id="inc" value="+" />
</form>

JavaScript代码

function inc(number) {
  document.getElementById("number").value++;
}

function dec(number) {
  if (document.getElementById("number").value != 0)
    document.getElementById("number").value--;
}

问题原因 #

核心问题是表单元素与全局函数的命名冲突：
当按钮位于<form>标签内部时，浏览器会自动将表单内的元素（按id或name属性）挂载到form对象的属性上。你的增减按钮id="inc"和id="dec"，刚好与定义的全局函数inc()、dec()同名。在form内部触发onclick时，浏览器会优先访问form对象上的inc/dec元素，而非全局函数，导致增减逻辑无法被正确执行。

解决办法 #

方法一：修改按钮ID避免冲突 #

将按钮的id改为与函数名不同的名称，消除命名冲突：

<form action="" method="post">
    <label>Test1</label><br>
    <input type="button" onclick="dec('number')" id="btn-dec" value="-"/>
    <input type="text" name="test1" id="number" value="0" min="0" size="3" />
    <input type="button" onclick="inc('number')" id="btn-inc" value="+" />
</form>

方法二：明确指定全局作用域调用函数 #

在onclick中使用window.前缀，强制浏览器调用全局作用域下的函数：

<form action="" method="post">
    <label>Test1</label><br>
    <input type="button" onclick="window.dec('number')" id="dec" value="-"/>
    <input type="text" name="test1" id="number" value="0" min="0" size="3" />
    <input type="button" onclick="window.inc('number')" id="inc" value="+" />
</form>

方法三：改用事件绑定替代内联onclick #

通过addEventListener绑定事件，彻底避免命名冲突，同时让代码更易维护。此外建议显式将输入框值转为数字，避免隐式转换的潜在问题：

修改后的HTML

<form action="" method="post">
    <label>Test1</label><br>
    <input type="button" id="dec" value="-"/>
    <input type="text" name="test1" id="number" value="0" min="0" size="3" />
    <input type="button" id="inc" value="+" />
</form>

修改后的JavaScript

const numberInput = document.getElementById('number');

document.getElementById('inc').addEventListener('click', () => {
  numberInput.value = parseInt(numberInput.value) + 1;
});

document.getElementById('dec').addEventListener('click', () => {
  const currentValue = parseInt(numberInput.value);
  if (currentValue > 0) {
    numberInput.value = currentValue - 1;
  }
});

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