variable problem: Uncaught TypeError: Cannot read property 'push' of undefined

Question

This codes gives all time the '"Uncaught TypeError": Cannot read the 'push' property of undefined' error. I'm pretty sure the problem is the order within the code. But after many tests I can't get this right.

I have read all of the already placed '"Uncaught TypeError": Cannot read the 'push' property of undefined' posts here on stackoverflow, but none of them solved my problem.

var fixedTriangles = [];

function loadClaims(loadingDoneCallback){
    // should be replaced by data from the DB.
    // fixedTriangles = [0,1,2,3,4,5];
    // TEST data from db
    request.onreadystatechange = function() {
    // parse the request and put the triangles in de array
    fixedTrianglesStr = request.response;
    // string min last comma
    fixedTriangles = fixedTrianglesStr.replace(/,\s*$/, "");
    document.getElementById("dbArray").innerHTML = "dbArray: " + fixedTriangles; 
    //// result = 0,1,2,3,4,5,6,7,8
    console.log("fixedTriangles TEST: " + fixedTriangles); 
    //// result = 0,1,2,3,4,5,6,7,8

    // for development only
    showClaimedData();
};
// only lauch callback when data is loaded.
loadingDoneCallback();
}
var request = new XMLHttpRequest();
request.open("GET", "http://www.example.com/db.php", true);
request.send();


//// To be clear, I left out the rest of the code. 
//// ...


function onFormSubmit(){
    console.log("close");

    var dataNode = document.getElementById("coordinates");
    var data = dataNode.textContent;
    var dataSplit = data.split("/");
    var fixedTriangles;
    // MAKE IT FIXED
    var returnTriangle = new THREE.Vector3(parseInt(dataSplit[0]),parseInt(dataSplit[1]),parseInt(dataSplit[2]));
    // TEST fixedTriangles: undefined WHY?
    document.getElementById("test").innerHTML = "fixedTriangles TEST: " + fixedTriangles; 
    //// result = undefined

    fixedTriangles.push(parseInt(returnTriangle.x)); 
    //// Uncaught TypeError: Cannot read property 'push' of undefined
    fixedTriangles.push(parseInt(returnTriangle.y)); 
    //// Uncaught TypeError: Cannot read property 'push' of undefined
    fixedTriangles.push(parseInt(returnTriangle.z)); 
    //// Uncaught TypeError: Cannot read property 'push' of undefined
    setAlphaOnTriangle(returnTriangle, 255);

    // save data here.

    showClaimedData();

    var formElement = document.getElementById("form");
    formElement.style.display = "none";
}

//// To be clear, I left out the rest of the code. 
//// ...

//// Are the important comments, about the results and errors, to look at.

When the form is sent the value of 'fixedTriangles' has to be sent but instead I get this error: 'Uncaught TypeError: Cannot read property 'push' or undefined'.

I have tested already a lot of this possible errors that i have read at other posts with this error: 'Uncaught TypeError: Cannot read property 'push' or undefined'.

The rest of this big code works without errors.

Could it be a sequence problem? I have already tested by putting the XMLHttpRequest at the top and bottom?

Done another test and in the console:

this line:

document.getElementById("test").innerHTML = "fixedTriangles TEST: " + fixedTriangles;

gives:

fixedTriangles TEST: 2 fixedTriangles TEST: 0,1,2,3,4,5,6,7,8

So, the first attempt is empty and the next two are giving the result?

That i do in the code that i have taken out to be clear. see: //// To be clear, I left out the rest of the code. — bart at stack
var fixedTriangles will set fixedTriangles 's value as undefined — Code Maniac

Clarity Clarity · Accepted Answer · 2019-09-04T09:13:30

In your onFormSubmit you override the global fixedTriangles by doing var fixedTriangles; and when you try to push to it you get the error since it's no longer an array.

variable problem: Uncaught TypeError: Cannot read property 'push' of undefined

3 Answers