Angular js : TypeError: Cannot read property 'elem' of undefined

Question

I drew a polygon on an image and I want to move it with the mouse click, i have this error and i can not do them have you an idea please. for this problem i used the librairie Two.js and i can not do that

 $scope.DrawPolygon = function (id, json)
 {

    var elem = document.getElementById('ImgCamera' + id);
    if (elem != null)
    {
        elem.innerHTML = "";
        var two = new Two({
            type: Two.Types.canvas,
            fullscreen: false,
            width: 640,
            height: 480,
        }).appendTo(elem);

        var canvas = two.renderer.domElement;
        var img = $scope.spotCAMImageLoaded[_GetCameraNumberFromPolygonNumber(id)];

        var texture = new Two.Texture(img, function () { });
        var rect = two.makeRectangle(canvas.width / 2, canvas.height / 2, canvas.width, canvas.height);
        rect.fill = texture;
        rect.noStroke();

        var jsonPoly = null;
        var camera = json.Camera2;
        if (_GetCameraNumberFromPolygonNumber(id) == 0)
            camera = json.Camera1;

        if (camera != null)
        {
            jsonPoly = camera[_GetPolygonNumberFromCameraNumber(id)];
            var polygon = two.makePath([new Two.Anchor(jsonPoly.P1.x, jsonPoly.P1.y)
                                         , new Two.Anchor(jsonPoly.P2.x, jsonPoly.P2.y)
                                         , new Two.Anchor(jsonPoly.P3.x, jsonPoly.P3.y)
                                         , new Two.Anchor(jsonPoly.P4.x, jsonPoly.P4.y)])


            polygon.fill = "#008bbe";
            polygon.opacity = 0.5;
            polygon.stroke = "#00435c";
            polygon.linewidth = 10;

        polygon.renderer.elem.style.cursor = 'pointer';
        two.update(); 

    }
}

not familiar with two.js, but i bet the faulty line is there `polygon.renderer.elem.style.cursor = 'pointer';`, isn't it? If it's the case, it means that your `polygon` var has no `renderer` property or that it was set to `undefined` at one point. Or maybe you meant to write `elem.style.cursor = 'pointer';`? — Kaddath, Mar 28 '18 at 12:41
Hello Kaddah i want to move my polygon with the cursor and i have this error how i can do that please — sani, Mar 28 '18 at 13:01
i've never done it and cannot really give a try right now, sorry. I wrote a comment on this specific error because i quickly spotted that the line i am talking about seemed "strange". Try to replace it with `elem.style.cursor = 'pointer';`, to see at least if the error goes away and that the cursor shows as a pointer. For the rest, cannot help right now.. — Kaddath, Mar 28 '18 at 13:12
Possible duplicate of [Detecting an undefined object property](https://stackoverflow.com/questions/27509/detecting-an-undefined-object-property) — mustaccio, Jan 02 '19 at 20:28

score 0 · Answer 1 · answered Mar 28 '18 at 12:37

Not familiar with Two.js and you didn't post any DOM structure, but there's a lot going on in this function. Consider breaking it down into smaller functions. Also use as much angularjs DSL as possible, eg :

use angular.element(<selector) instead of document.<selectorMethod>
use a truthy check of elem if(elem), values of 0 null or undefined will be guarded against, same for the camera check

score 0 · Answer 2 · answered Jan 02 '19 at 19:51

0

Unfortunately undefined and null are different values in JavaScript. In the first statement, document.getElementById('ImgCamera' + id) is returning undefined. Try changing the first if statement to this:

if (elem != undefined && != null) {

answered Jan 02 '19 at 19:51

merhoo

589
6
18

Angular js : TypeError: Cannot read property 'elem' of undefined

2 Answers2