Just diving into the world of Electron + Typescript, so please bear with me.
Currently, I'm experimenting with what can be achieved within Electron.
Issue: My goal is to manipulate DOM elements outside of the renderer. I pass a button as a parameter to a function in test.js where an EventListener is added to listen for a 'click' event and log that the button has been pressed - which works perfectly fine.
Now, I introduce a Textarea. Again, I pass it as a parameter and save a reference to it in the test file. On click, a function is triggered using this reference to log the text inside the Textarea.
Problem: The Textarea reference seems to be defined only within the function where the EventListener is added and becomes undefined outside of this function. How come, and how can I resolve this issue?
renderer.ts
import { test } from "./test.js";
let testInstance = new test();
let testButton = document.getElementById("test");
let testArea = document.getElementById("texttest");
console.log(testArea);
testInstance.addEventListenerToButton(testButton, testArea);
test.ts
export class test {
textArea;
addEventListenerToButton(toAddTo, textArea) {
console.log(textArea);
this.textArea = textArea;
console.log(this.textArea);
toAddTo.addEventListener('click', this.showTheText);
console.log(this.textArea)
}
showTheText() {
console.log(this.textArea);
console.log(this.textArea.value);
}
}
Expected: showTheText() should either work properly or throw an error about textArea.value.
Unexpected: The error being 'textArea undefined':
Uncaught TypeError: Cannot read property 'value' of undefined
at HTMLButtonElement.test.showTheText