How to run javascript code when the value of a selected item changes

Question

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>

I want to hide/show the button when a element have a diferent value of $260 but with my code it only happen when i refresh the page. I need that this function run when the value change on real time but i don't know how do it.

function hide() {

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

Welcome to StackOverflow - Please take the [tour] and, as @deepakchethan mentioned, add a minimal amount of code (HTML/JS) to help you out faster - also known as [mcve] — blurfus, Sep 18 '21 at 05:24
why you are using querySelectorAll ? when you can use querySelector for first match and can i know the type of element which you want to check for change give here that html code please — Amir Rahman, Sep 18 '21 at 05:25

Amir Rahman · Accepted Answer · 2021-09-20T01:46:29.223

1

you can track changes in input fields with oninput event listener . now it will trigger your check function each time when input field is changed

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>

edited Sep 20 '21 at 01:46

answered Sep 18 '21 at 05:36

Amir Rahman

1,076
1
6
15

1

Try `btn.hidden = inputEl.value === "$260"` instead of your if..else block. – connexo Sep 18 '21 at 05:37
ya i think its also a good way – Amir Rahman Sep 18 '21 at 05:40
i forgot to mention that for all input fields you have to use `.value` to get value not innerHTML or InnerText input fields are a widget in html so they have different behaviour than other simple elements like div , p , span etc – Amir Rahman Sep 18 '21 at 05:57
Raman Then edit that into your answer. – connexo Sep 18 '21 at 07:58

score 0 · Answer 2 · answered Sep 18 '21 at 05:31

0

You should use event listener .

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

answered Sep 18 '21 at 05:31

Ali M. Sadeghi

123
9

How to run javascript code when the value of a selected item changes

2 Answers2