如何识别用户最后操作的关联输入框并设置elmChanged变量取值

问题根源 #

你的逻辑本身是对的，问题出在通过JS代码修改输入框的值时，会主动触发对应输入框的oninput事件，导致另外两个输入的变更回调被执行，把你刚设置好的elmChanged值覆盖了，也会造成不必要的循环调用。

解决方案 #

新增一个全局标记位，识别当前值变更是不是代码联动触发的，如果是就跳过elmChanged赋值和联动逻辑，避免值被覆盖。以下是完整可运行的修改后代码：

JS代码 #

var elmChanged = ""
// 新增标记位：是否是代码主动修改值，默认false
var isUpdatingByCode = false

function RangeChanged(){
    // 如果是代码联动触发的变更，直接退出
    if(isUpdatingByCode) return
    // 标记接下来要修改其他两个输入的值，是代码操作
    isUpdatingByCode = true
    amountInput.value=amountRange.value; 
    amountInput_2.value=amountRange.value * 2
    elmChanged = 1
    // 所有值修改完成，重置标记
    isUpdatingByCode = false
    // 同步更新页面显示
    updateChangedView()
}

function FirstInputChanged(){
    if(isUpdatingByCode) return
    isUpdatingByCode = true
    amountRange.value=amountInput.value; 
    amountInput_2.value=amountInput.value * 2;
    elmChanged = 1
    isUpdatingByCode = false
    updateChangedView()
}

function SecondInputChanged(){
    if(isUpdatingByCode) return
    isUpdatingByCode = true
    amountRange.value=amountInput_2.value; 
    amountInput.value=amountInput_2.value / 2;
    elmChanged = 0
    isUpdatingByCode = false
    updateChangedView()
}

// 新增方法：同步更新页面上的元素变更状态
function updateChangedView(){
    document.getElementById('ElementInputChanged').innerText = elmChanged
    console.log(elmChanged)
}

HTML代码（和原代码一致，无需修改） #

<form>
  <input type="range" name="amountRange" id="amountRange" min="0" max="100" value="50" step="1" oninput="RangeChanged()"  />
  <input type="text" name="amountInput" id="amountInput" min="0" max="100" value="50" oninput="FirstInputChanged()"  />
  <input type="text" name="amountInput_2" id="amountInput_2" min="0" max="200" value="100" oninput="SecondInputChanged()" />
        
  <span>Element Changed:</span> <span id="ElementInputChanged"></span>

</form>

逻辑说明 #

1. 只有用户直接操作元素触发的变更回调，才会执行赋值和联动逻辑，代码联动触发的回调会直接跳过
2. 每次用户操作完成后主动调用更新方法，把elmChanged的值同步到页面显示
3. 完全保留你原有的联动计算逻辑，不需要调整数值规则

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