如何动态修改number类型input输入框的数值？

完全可以通过修改number类型input的value属性实现提交失败后恢复数值的需求，你的代码没生效主要是两个细节问题：

1. DOM选择器的id拼写不一致 #

你HTML里的input id是measurment（少了一个字母e），但JS代码里选择的是#measurement，导致根本找不到目标input元素，自然无法完成赋值。

2. 数值转换的严谨性（可选但推荐） #

虽然number类型input可以直接接收数字格式的字符串，但将备份的innerHTML内容显式转换为数字类型，能避免潜在的格式问题（比如文本里包含空格、换行符等无效内容）。

修正后的代码示例 #

JavaScript 部分

function resolveForm(item_Id) {
  // 获取备份的数值文本
  const backupText = document.querySelector(`div#${item_Id}.result #context > #cmeasurement`).innerHTML;
  // 转换为整数（如果需要浮点数可以用Number()或parseFloat）
  const backupValue = Number.parseInt(backupText, 10);
  // 获取目标input（确保id拼写一致）
  const input = document.querySelector("#addInventoryform #measurement");
  // 赋值恢复数值
  input.value = backupValue;
}

HTML 部分（修正id拼写）

<div id="addInventory_form">
  <form id="addInventoryform" autocomplete="off">
    <label for="measurement">Measurement</label>
    <!-- 修正input的id为measurement，和label的for、JS选择器一致 -->
    <input id="measurement" name="measurement" type="number" value="1">
  </form>
</div>

<div id="a123121" class="result" style="background-color: wheat">
  <div>
    <button onclick="resolveForm('a123121')" id="result_id">恢复数值</button>
    <div id="status"></div>
  </div>
  
  <div id="context" style="display:none">
    <div id="cmeasurement">12312</div>
  </div>
</div>

额外说明 #

• number类型input的value属性支持直接接收数字或合法的数字字符串，显式转换为Number类型能提升代码稳定性。
• 提交失败时，你可以在错误处理逻辑中直接调用这个resolveForm函数，传入对应备份项的ID即可快速恢复输入框数值。

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