javascript callback function works just once

Question

i use a callback function into a object to update html (xmlhttprequest).

the firts time (onload), callback works fine. the second time (timer1) property url is undefined under the Post function no errors in console

my script and some console.log:

class PostJSON {
    constructor() {
        this.response = {};
        this.url = "../iot/PostJSON.php";
    }
    callback = function() {
    }

    Post = function(datapost,callback) {
        console.log(this.url);
        console.log(datapost);
        let xhttp = new XMLHttpRequest();
        let myJSON = JSON.stringify(datapost);
        xhttp.open("POST", this.url, true);
        xhttp.setRequestHeader("Content-type", "application/json");
        xhttp.send(myJSON); 
        var instance = this;
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let json = JSON.parse(this.responseText);
                instance.response = json;
                instance.callback();
            }
        }
    }
}```

const net = new PostJSON();
net.callback = function(){
    console.log(this.response["data"]["datetime"][0]);
    document.getElementById("temp").innerHTML = this.response["data"]["temp"][0] + "°C";
}

window.addEventListener('DOMContentLoaded', net.Post({"id":1}) );

var myTimer1 = setInterval(net.Post, 5000,{"x":1,"id":1});

Make `Post` an arrow function. [What is the value of "this" within an anonymous function in setTimeout below?](https://stackoverflow.com/questions/32542764/what-is-the-value-of-this-within-an-anonymous-function-in-settimeout-below) — Guy Incognito, May 13 '20 at 04:43
That's not how you use [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener), you should pass a reference to the event handler function to the method, but you're passing `undefined` instead. Here: `net.Post({"id":1})`, but `net.Post` doesn't return anything. — Teemu, May 13 '20 at 05:24
i've found a solution : in class : that = this; and them i use that in function Post — dam74, May 13 '20 at 05:27

score 0 · Answer 1 · answered May 13 '20 at 05:34

function PostJSON() {
    this.response = {};
    this.url = "../iot/PostJSON.php";
    this.callback = function() {
    }
    var that = this;
    this.Post = function(datapost,callback) {
        console.log(that.url);
        console.log(datapost);
        let xhttp = new XMLHttpRequest();
        let myJSON = JSON.stringify(datapost);
        xhttp.open("POST", that.url, true);
        xhttp.setRequestHeader("Content-type", "application/json");
        xhttp.send(myJSON); 
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let json = JSON.parse(this.responseText);
                if (json.hasOwnProperty('infos'))
                    if (json["infos"].hasOwnProperty('infos'))
                        json["infos"]["infos"] = JSON.parse(json["infos"]["infos"]);
                that.response = json;
                that.callback();
            }
        }
    }
}

javascript callback function works just once

1 Answers1