How to getElementById to parse ros status correctly

Question

I want to parse the ROS status inside my webpage, but I can't get my element by Id correctly.

Can you please tell me how can I parse my ROS status inside my HTML page correctly? thanks in advance.

main.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Something</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="favicon.ico"><script defer src="main.js"></script></head>
  <body>
    <div id="container"></div>
    <div id="ros_status"></div>
  </body>
</html>

main.js

import { Ros, Message, Topic, } from "roslib";

class ROSInterface {
    constructor(container_id) {
        this.container = document.getElementById(container_id, true);
        console.log(this.container);
        this.ros = new Ros({
            url : 'ws://localhost:9090'
        });
    }

    init() {
        if (this.container in document) {
            console.log(this.container);
            this.ros.on('connection', function () {
                this.container.innerHTML = "Connected";
            });

            this.ros.on('error', function (error) {
                this.container.innerHTML = "Error";
            });

            this.ros.on('close', function () {
                this.container.innerHTML = "Closed";
            });
        }
        else {
            console.log(document);
            this.ros.on('connection', function () {
                console.log("Connected");
            });

            this.ros.on('error', function (error) {
                console.log("Error");
            });

            this.ros.on('close', function () {
                console.log("Closed");
            });
        }
    }
}

const ros_iface_ = new ROSInterface('ros_status');
ros_iface_.init();

How to getElementById to parse ros status correctly

main.html

main.js

0 Answers0