How to get a button from the Zotero preference pane?

[Julian]

I'm trying to write a Zotero plugin as a personal project. I'm not a programmer and it's my first time using JavaScript (I know Python though). My question is, how can I have access to a button that I added to the Zotero preference pane? This is my prefs.xhtml:

<vbox>
<groupbox>
<button
id="myplugin-action-button"
label="Replace Field"
style="
width: 100px;
height: 30px;
background-color: #007acc;
color: rgb(0, 0, 0);
border-radius: 4px;
padding: 5px;
"

/>
</groupbox>
</vbox>

Then, inside the `addToWindow()` method, following the make-it-red example, I added the following line:

this.log("Adding event listener...");
window.document
.getElementById("myplugin-action-button")
.addEventListener("command", async () => {
this.log("'Button clicked");
});

However, nothing happens. The reason seems to be that "myplugin-action-button" is never found. I also tried using oncommand="my-plugin.handleButtonClick();" but it also didn't work. My file is called my-plugin.js and the object is called MyPlugin.

I'm not quite sure what I'm doing wrong, so I would greatly appreciate any help you can provide.