I am writing a JS event listener to hide button if the entered value in a text field is true:
const item = document.getElementById("my-field");
item.addEventListener("input", function (evt) {
if (item.value == "true") {
document
.getElementById("my-button")
.setAttribute("style", "display: none;");
}
});
This works fine if I manually add this value, but I have another JS function (running as a part of chrome extension) that does it. The eventListener doesn't work then. Any idea how can I make this work when a JS code is inputting the value?
Try replacing input with change, like this:
item.addEventListener('change', function (evt) {
if (item.value == 'true') {
document.getElementById("my-button").setAttribute("style", "display: none;");
}
});
This may solve the problem.
I suspect you have access to change the extension you're dealing with? If so, you probably want to use this method (just reverse the order here. You're going from extension to index.html): https://stackoverflow.com/a/11431812/3011559
If not, you may have to resort to polling the input quickly and checking for changes. There might be some hacky ways to detect changes (you might want to look into MutationObserver) with events when the changes are changed programmatically. However, considering the changes are by an extension, the contexts are isolated. It makes it tricky by design.