How do I edit the content of the popup my addon makes?

Add-ons Development
#1

Like for webpages you use document.something to get the element on the page. How do I do the same for a textbox on my addon? Or is something else wrong?

<html>

<head>

\<link rel="stylesheet" href="styles.css" />

</head>

<body>

<script src=“searchtoolong.js”></script>

\<div class="container">

    \<textarea onkeyup="filterWords()" id="query" cols="50" rows="10" placeholder="Type in a query">\</textarea>

    \<div id="result" class="boxed">

        Result will be here

    \</div>

\</div>

</body>

</html>

let re = /^a-zA-Z[^a-zA-Z]/gi;

function filterWords() {

let search = document.getElementById("query").value;

search = search.replace(/[^0-9a-zA-Z\s]/g, " ");

search = search.toLowerCase();

search = search.replace(re, " ");

search = search.replace("  ", " ");

search = Array.from(new Set(search.split(" "))).join(" ");

//search = search.replaceAll(/[^\s]{15,}[\s]*/g, m => `\"${m.trim()}\" `);

document.getElementById("result").innerHTML = search;

}

#2

Generally speaking, you use the same standard APIs in a script in your popup that you would use on the web. The only time something special needs to happen is when calling extension APIs.

I think it is preferred to attach your event handler this way:

var ta = document.getElementById('query');
ta.addEventListener('keyup', filterWords, false);

Then in your function, you can access the element from the event. Also, innerHTML can trigger a warning so if it’s not needed, you should avoid it. For example:

function filterWords(evt) {
  let search = evt.target.value;
  ...
  document.getElementById("result").textContent = search;
}
#3

Thank you. Using an event listener made it work.