I am using the ROS JavaScript Library (CDN) which uses EventEmitter2 (CDN) to listen to a topic. Please see the following code snippet:

var ros = new ROSLIB.Ros({ url: "ws://localhost:9090" });

class Subscriber extends EventEmitter2 {
    constructor(element) {
        super();

        this.element = element;
        this.listener = new ROSLIB.Topic({
            ros: ros,
            name: "/listener",
            messageType: "std_msgs/String",
        });
        this.listener.subscribe(this.handleCallback);
    }

    handleCallback(message) {
        this.emit("update", message.data, this.element);
        // just for debugging. access a property of our element
        console.log("callback" + message.data + " " + this.element.innerHTML);
    }
}

Upon receiving a message, an event is fired which is handled by the handleCallback. Here, using console.log("callback" + message.data), the message (string) is visible.

My goal is to receive the new callback as shown below:

var element = document.getElementById("hello");
var subscriber = new Subscriber(element);
subscriber.on("update", (data, element) => {
    console.log("received" + data + " " + element.innerHTML);
}); 

However, there are two problems mentioned below:

1. Accessing the element using this.element is throwing the following error:

   Uncaught TypeError: Cannot read properties of undefined (reading 'innerHTML')
   

2. To avoid the above error temporarily, I removed it from the emit call as this.emit("update", message.data) but no success. Furthermore, I used this.emit("update", "my static message") but didn't receive a callback.