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

Posted 2023-02-22

【中文标题】当所选项目的值发生变化时如何运行javascript代码[重复]

【英文标题】：How to run javascript code when the value of a selected item changes [duplicate]

【发布时间】：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();

【问题讨论】：

你能添加一个最小的可重现的例子吗？

欢迎来到 *** - 请使用 tour 并像 @deepakchethan 提到的那样，添加最少量的代码 (html/JS) 以帮助您更快地完成工作 - 也称为 minimal reproducible example跨度>

你为什么使用 querySelectorAll ？当您可以使用 querySelector 进行第一次匹配时，我可以知道您要检查更改的元素类型，请在此处给出 html 代码

【参考方案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)