JS addEventListener for "input" change made by code

Question

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?

I think you need also to listen to the change in input values. sth like addEventListener("change" .... — Mohamad Ghaith Alzin, May 13 '22 at 01:38
have you tried replacing the `item` with `document.getElementById("my-field")`? — mrtechtroid, May 13 '22 at 01:42
Does this answer your question? [Detect programmatic changes on input type text](https://stackoverflow.com/q/16013024/283366) — Phil, May 13 '22 at 01:51

score 0 · Answer 1 · answered May 13 '22 at 01:54

0

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.

answered May 13 '22 at 01:54

Filinto Delgado

21
1
4

This doesn't work. – sshussain270 May 13 '22 at 02:25

score 0 · Answer 2 · answered May 13 '22 at 01:58

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.

JS addEventListener for "input" change made by code

2 Answers2