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();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>You should use event listener .
document.querySelector('.wapf-grand-total').addEventListener('keyup', hide)