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

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 minimal reproducible example — blurfus
– blurfus, Commented Sep 18, 2021 at 5: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
– Amir Rahman, Commented Sep 18, 2021 at 5:25

Amir Rahman · Accepted Answer · 2021-09-20 01:46:29Z

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, 2021 at 1:46

answered Sep 18, 2021 at 5:36

Amir Rahman

1,1191 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

connexo Over a year ago

Try btn.hidden = inputEl.value === "$260" instead of your if..else block.

Amir Rahman Over a year ago

ya i think its also a good way

Amir Rahman Over a year ago

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

connexo Over a year ago

Raman Then edit that into your answer.

Ali M. Sadeghi · Accepted Answer · 2021-09-18 05:31:49Z

0

You should use event listener .

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

answered Sep 18, 2021 at 5:31

Ali M. Sadeghi

3032 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related