Modify callback to bind a DOM element with it in JavaScript

Question

I am trying to attach a DOM element with a callback in JavaScript. Basically, the following is what I want:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
    <script src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
    <script>
        var ros = new ROSLIB.Ros({ url: "ws://localhost:9090" });
        var listener = new ROSLIB.Topic({
            ros: ros,
            name: "/listener",
            messageType: "std_msgs/String",
            element: document.getElementById("hi") // this is added to show my need
        });

        listener.subscribe(function (event) {
            // do crazy things here. let say replace the text
            event.element.innerHTML = event.message.data; // this is added to show my need
        });
    </script>
</head>
<body>
    <div id="hi"> hello world </div>
</body>
</html>

I want to use the DOM element inside the callback, which was declared while initializing the listener. I found a similar question here but could not make it work in this case.

function Subscriber(element, topic) {
    var listener = new ROSLIB.Topic({
        ros: ros,
        name: topic,
        messageType: "std_msgs/String"
    });
    listener.addEventListener("subscribe", this, false);
    this.listener = listener;
    this.element = element;
}

Subscriber.prototype.handleEvent = function (event) {
    switch (event.type) {
        case "subscribe":
            this.element.dispatchEvent(new CustomEvent("subscribe", { details: { msg: message, e: element } }));
    }
};

var element = document.getElementById("hi");
var topic = "/listener";
var subscriber = new Subscriber(element, topic);
subscriber.handleEvent(function (event) {
    // do crazy things here. let say replace the text
    event.details.e.innerHTML = event.details.msg.data;
});

As listener is a custom object, addEventListener is unavailable. Therefore, the following error is reported at the console:

listener.addEventListener("subscribe", this, false);
Uncaught TypeError: listener.addEventListener is not a function

How to modify the subscribe callback to bind a DOM element with it in JavaScript?

Your question seems quite complicated. What you like to do, is to display the `event.message.data` contents inside the `
hello world
`? Is this what you try to achieve? — KodeFor.Me, Apr 13 '22 at 09:14
@KodeFor.Me: Sorry for the confusion. In this example, I am replacing the text. However, if I have the `element`, I want to apply other JS functions on the element, such as `appendChild` etc. — ravi, Apr 13 '22 at 09:26
My idea is to catch the callback and fire a custom event. The custom event should contain the `element` as well. — ravi, Apr 13 '22 at 09:28
OK, from what I see then you have several errors in your code. First of all try `console.log` anything that you are not sure what it contains inside to get a better idea of what's inside a variable, like `console.log(event)` and then open your browser console and see there what a variable contains and how to access it's inner contents. — KodeFor.Me, Apr 13 '22 at 09:32
Then, it seems like there's no `subscriber.subscribe()` method to call. Instead you have to call the `subscriber.handleEvent()`. This statement `Subscriber.prototype.handleEvent = function (event) {}` it actually extends the `Subscriber` object by adding a new method to it. And inside the new method declaration `handleEvent` you try to dispatch the custom event you created. — KodeFor.Me, Apr 13 '22 at 09:34
Finally, if you didn't declare the method `dispatch` somewhere else, there's no such a function in JavaScript. if you want to dispatch the event you have to do this using a `DOM` Element. If you don't have a specific DOM element for this purpose, you can do something like that: `const body = document.querySelector('body'); body.dispatchEvent( new CustomEvent("subscribe", { ... }));` — KodeFor.Me, Apr 13 '22 at 09:38
@KodeFor.Me: Thank you very much. (a) I am debugging with `console.log(event)`. It is dumping the code in the console. weird, isn't it? (b) I changed the code accordingly. (c) I have the element already, so I used it `this.element.dispatchEvent` but no success so far. BTW, how to catch `subscribe` event? It seems that the `roslibjs` is using `eventemitter2.js`. — ravi, Apr 13 '22 at 10:44
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/243852/discussion-between-ravi-joshi-and-kodefor-me). — ravi, Apr 13 '22 at 13:15

Modify callback to bind a DOM element with it in JavaScript

0 Answers0