如何解决修改输入框默认值后点击按钮值自动还原的问题？

你的问题核心是：直接修改输入框的value属性后，页面的原有逻辑（比如前端框架的双向绑定、自定义的输入同步逻辑）没感知到值的变化，导致点击按钮前又把值改回了默认的$1。

解决思路是修改值后，手动触发输入框的标准事件，让页面的逻辑同步更新内部状态，具体方案如下：

方案1：触发输入框的input/change事件 #

很多页面会监听input或change事件来同步输入值到内部状态，直接改DOM的value不会触发这些事件，所以需要手动触发：

function run() {
  var trade_amount = document.querySelectorAll('.value__val input')[0];
  // 先聚焦输入框，确保状态正确
  trade_amount.focus();
  // 设置目标值
  trade_amount.value = '$5';
  // 触发input事件，通知页面值已更新（关键步骤）
  trade_amount.dispatchEvent(new InputEvent('input', { bubbles: true }));
  // 可选：如果页面监听的是change事件，也触发一次
  trade_amount.dispatchEvent(new Event('change', { bubbles: true }));
  trade_amount.blur();

  const call_button = document.getElementsByClassName("btn btn-call")[0];
  call_button.click();
}

方案2：添加延迟确保状态同步 #

如果页面有防抖、节流或者异步的输入处理逻辑，可能需要给页面一点时间完成状态同步，再点击按钮：

function run() {
  var trade_amount = document.querySelectorAll('.value__val input')[0];
  trade_amount.focus();
  trade_amount.value = '$5';
  trade_amount.dispatchEvent(new InputEvent('input', { bubbles: true }));
  trade_amount.blur();

  // 延迟100毫秒点击按钮，确保页面逻辑完成值的同步
  setTimeout(() => {
    const call_button = document.getElementsByClassName("btn btn-call")[0];
    call_button.click();
  }, 100);
}

为什么原来的代码无效？ #

你之前的代码只修改了DOM的value并触发了blur，但没有触发页面监听的input或change事件。页面的内部状态仍然保留着默认的$1，当你点击按钮时，页面逻辑会把内部状态的值重新同步到输入框，导致你看到值变回$1。

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