当所选项目的值发生变化时如何运行javascript代码[重复]答案

【问题标题】：How to run javascript code when the value of a selected item changes [duplicate]当所选项目的值发生变化时如何运行javascript代码[重复]
【发布时间】：2021-11-12 19:50:49
【问题描述】：

function hidenv() {

  var txt = document.querySelector(".wapf-grand-total")[0].innerText;
  if (txt === "$260") {document.querySelector("button").style.display = "none";
  }
        
}
hidenv();

<input class="wapf-grand-total">
<button>button</button>

我想在元素具有 $260 的不同值时隐藏/显示按钮，但我的代码仅在我刷新页面时才会发生。我需要这个函数在值实时变化时运行，但我不知道怎么做。

function hide() {

  var txt = document.querySelectorAll(".wapf-grand-total")[0].innerText;
  if (txt !== "$260") {document.querySelector("button").style.display = "none";
  }
        
}
hide();

【问题讨论】：

你能添加一个最小的可重现的例子吗？
欢迎来到 StackOverflow - 请使用 tour 并像 @deepakchethan 提到的那样，添加最少量的代码 (HTML/JS) 以帮助您更快地完成工作 - 也称为 minimal reproducible example跨度>
你为什么使用 querySelectorAll ？当您可以使用 querySelector 进行第一次匹配时，我可以知道您要检查更改的元素类型，请在此处给出 html 代码

标签： javascript

【解决方案1】：

您可以使用 oninput 事件监听器跟踪输入字段的变化。现在每次更改输入字段时都会触发您的检查功能

function hidenv() {
  var inputEl = document.querySelector(".wapf-grand-total"),
      btn = document.querySelector("button"),
      isVal260 = inputEl.value == "$260"
      btn.hidden = isVal260
}

document.querySelector(".wapf-grand-total").addEventListener("input",hidenv)

// hidden method update suggested by @connexo

<input type="text" class="wapf-grand-total">
<button>button</button>

【讨论】：

尝试btn.hidden = inputEl.value === "$260" 而不是你的 if..else 块。
是的，我认为这也是一个好方法
我忘了提到，对于所有输入字段，您必须使用 .value 来获取值，而不是 innerHTML 或 InnerText 输入字段是 html 中的小部件，因此它们具有与其他简单元素（如 div ）不同的行为， p ，跨度等
拉曼然后将其编辑到您的答案中。

【解决方案2】：

你应该使用事件监听器。

    document.querySelector('.wapf-grand-total').addEventListener('keyup', hide)

【讨论】：