选中项值发生变化时如何实时运行JavaScript代码

原有代码仅在页面刷新时生效的原因是：仅在页面加载阶段执行了一次判断逻辑，没有绑定对应元素值变化的触发事件，值更新后不会自动重新运行判断逻辑。

首先先纠正原有代码的几个基础错误：

• document.querySelector() 返回的是首个匹配的单个DOM元素，不需要加[0]，只有querySelectorAll()返回的节点集合才需要用下标取值
• 你提供的.wapf-grand-total是input输入框元素，读取值应该用.value而非.innerText
• 原有逻辑缺少元素值等于$260时恢复按钮显示的分支，否则按钮隐藏后不会再恢复显示

场景1：值变化由用户手动输入触发 #

直接给input绑定input事件即可实现实时响应，完整代码如下：

// 提前获取DOM元素，避免重复查询损耗性能
const totalInput = document.querySelector('.wapf-grand-total')
const targetBtn = document.querySelector('button')

// 封装按钮显隐判断逻辑
function toggleButton() {
  const currentValue = totalInput.value.trim()
  // 不等于$260时隐藏按钮，等于时显示
  targetBtn.style.display = currentValue === '$260' ? 'block' : 'none'
}

// 页面加载时先执行一次判断
toggleButton()
// 绑定输入事件，值变化时自动触发判断逻辑
totalInput.addEventListener('input', toggleButton)

场景2：值由其他JS代码动态修改，无用户输入操作 #

这种场景下需要用MutationObserver监听元素属性变化实现响应：

const totalInput = document.querySelector('.wapf-grand-total')
const targetBtn = document.querySelector('button')

function toggleButton() {
  const currentValue = totalInput.value.trim()
  targetBtn.style.display = currentValue === '$260' ? 'block' : 'none'
}

// 页面加载先执行一次判断
toggleButton()

// 创建观察者实例
const observer = new MutationObserver(toggleButton)
// 配置监听规则：仅监听input的value属性变化
observer.observe(totalInput, {
  attributes: true,
  attributeFilter: ['value']
})

// 后续如果需要停止监听可执行 observer.disconnect()

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