locked
SCRIPT5007: Unable to get property 'width' of undefined or null reference RRS feed

  • Question

  • User-605499000 posted

    I have had to redo  JavaScript programs that were written in 1999.  I am having trouble fixing the above problem.  Do you know of a program that I can take an old JavaScript file to and they can run a program to check and fix the errors.  I used babel to make changes on this program but I still had this error.

    Below is the program:   I have put (***) on the line I am having a problem with.

    Puzzle = function Puzzle(containerObj, columns, rows, folder, pieceWidth, pieceHeight, snapDistance, zIndex) {          (* is this line okay and not undefined?)
    this.containerObj = containerObj;
    this.columns = columns;
    this.rows = rows;
    this.folder = folder;
    this.pieceWidth = pieceWidth;
    this.pieceHeight = pieceHeight;
    this.snapDistance = snapDistance;
    this.zIndex = zIndex;
    this.SHADOW_SIZE = 1;
    this.pieces = new Array();
    this.shadows = new Array();
    this.dynamicDivs = new DynamicDiv(this.containerObj, this.zIndex);
    this.movime = new Movime(10);
    this.Initialize();
    };

    Puzzle.prototype.Initialize = function () {
    for (var row = 0; row < this.rows; row++) {
    for (var column = 0; column < this.columns; column++) {
    var pieceNumber = row * this.columns + column + 1;
    var left = (parseInt(this.containerObj.style.width) - this.columns * this.pieceWidth) / 2 + column * this.pieceWidth;
    var top = (parseInt(this.containerObj.style.height) - this.rows * this.pieceHeight) / 2 + row * this.pieceHeight;
    var shadow = this.dynamicDivs.Insert(0, "", "", left - this.SHADOW_SIZE, top - this.SHADOW_SIZE, this.pieceWidth + this.SHADOW_SIZE * 2, this.pieceHeight + this.SHADOW_SIZE * 2, "", "", "");
    shadow.style.display = "block";
    shadow.style.backgroundColor = "#777777";
    this.shadows[pieceNumber - 1] = {
    obj: shadow,
    column: column,
    row: row,
    group: this.zIndex + pieceNumber
    };
    var piece = this.dynamicDivs.Insert(0, "", "", left, top, this.pieceWidth, this.pieceHeight, "", "", "");
    piece.style.cursor = "pointer";
    piece.style.display = "block";
    piece.style.backgroundImage = "url(" + this.GetFileName(pieceNumber) + ")";
    var thisClass = this;

    piece.onmousedown = function () {
    thisClass.BringToFront(this);
    BmInitDragAndDrop(this, thisClass);
    };

    piece.onmouseup = function () {
    BmEndDragAndDrop(this);
    thisClass.SnapPieces(this);
    };

    this.pieces[pieceNumber - 1] = {
    obj: piece,
    column: column,
    row: row,
    group: this.zIndex + pieceNumber
    };
    }
    }

    this.Shuffle();
    };

    Puzzle.prototype.Count = function () {
    return this.columns * this.rows;
    };

    Puzzle.prototype.MovePiece = function (obj, left, top) {
    if (this.containerObj === null || obj === null) return false;
    var containerWidth = parseInt(this.containerObj).style.width - parseInt(obj.style.width);                    ( **** this line the width and the next line the height)
    var containerHeight = parseInt(this.containerObj).style.height - parseInt(obj.style.height);
    if (left < 0 + this.SHADOW_SIZE) left = this.SHADOW_SIZE;
    if (top < 0 + this.SHADOW_SIZE) top = this.SHADOW_SIZE;
    if (left > containerWidth - this.SHADOW_SIZE) left = containerWidth - this.SHADOW_SIZE;
    if (top > containerHeight - this.SHADOW_SIZE) top = containerHeight - this.SHADOW_SIZE;
    var offsetX = left - parseInt(obj.style.left);
    var offsetY = top - parseInt(obj.style.top);
    var group = this.GetGroup(obj);
    this.MoveGroupPieces(group, offsetX, offsetY);
    };

    Puzzle.prototype.MovePiece2 = function (obj, left, top) {
    if (this.containerObj === null || obj === null) return false;
    var group = this.GetGroup(obj);
    var groupArea = this.GetGroupArea(group);
    var newContainerX1 = parseInt(obj.style.left) - groupArea.x1;
    var newContainerY1 = parseInt(obj.style.top) - groupArea.y1;
    var newContainerX2 = parseInt(this.containerObj).style.width - (groupArea.x2 - parseInt(obj.style.left));
    var newContainerY2 = parseInt(this.containerObj).style.height - (groupArea.y2 - parseInt(obj.style.top));
    if (left < newContainerX1 + this.SHADOW_SIZE) left = newContainerX1 + this.SHADOW_SIZE;
    if (top < newContainerY1 + this.SHADOW_SIZE) top = newContainerY1 + this.SHADOW_SIZE;
    if (left > newContainerX2 - this.SHADOW_SIZE) left = newContainerX2 - this.SHADOW_SIZE;
    if (top > newContainerY2 - this.SHADOW_SIZE) top = newContainerY2 - this.SHADOW_SIZE;
    var offsetX = left - parseInt(obj.style.left);
    var offsetY = top - parseInt(obj.style.top);
    this.MoveGroupPieces(group, offsetX, offsetY);
    };

    Puzzle.prototype.MoveGroupPieces = function (group, offsetX, offsetY) {
    for (var i = 0; i < this.Count(); i++) {
    if (this.pieces[i].group === group) {
    this.pieces[i].obj.style.left = parseInt(this.pieces[i].obj).style.left + offsetX + "px";
    this.pieces[i].obj.style.top = parseInt(this.pieces[i].obj).style.top + offsetY + "px";
    }

    if (this.shadows[i].group === group) {
    this.shadows[i].obj.style.left = parseInt(this.shadows[i].obj).style.left + offsetX + "px";
    this.shadows[i].obj.style.top = parseInt(this.shadows[i].obj).style.top + offsetY + "px";
    }
    }
    };

    Puzzle.prototype.GetGroup = function (obj) {
    for (var i = 0; i < this.Count(); i++) {
    if (this.pieces[i].obj === obj) return this.pieces[i].group;
    }

    return -1;
    };

    Puzzle.prototype.GetGroupArea = function (group) {
    var areaX1 = 3000;
    var areaY1 = 3000;
    var areaX2 = 0;
    var areaY2 = 0;

    for (var i = 0; i < this.Count(); i++) {
    if (this.pieces[i].group === group) {
    var objX1 = parseInt(this.pieces[i].obj).style.left;
    var objY1 = parseInt(this.pieces[i].obj).style.top;
    var objX2 = objX1 + parseInt(this.pieces[i].obj).style.width;
    var objY2 = objY1 + parseInt(this.pieces[i].obj).style.height;
    if (objX1 < areaX1) areaX1 = objX1;
    if (objY1 < areaY1) areaY1 = objY1;
    if (objX2 > areaX2) areaX2 = objX2;
    if (objY2 > areaY2) areaY2 = objY2;
    }
    }

    return {
    x1: areaX1,
    y1: areaY1,
    x2: areaX2,
    y2: areaY2
    };
    };

    Puzzle.prototype.BringToFront = function (obj) {
    var group = this.GetGroup(obj);

    for (var i = 0; i < this.Count(); i++) {
    if (this.pieces[i].group === group) {
    this.pieces[i].group = this.zIndex + this.Count();
    this.shadows[i].group = this.zIndex + this.Count();
    } else {
    if (this.pieces[i].group > group) {
    this.pieces[i].group--;
    this.shadows[i].group--;
    }
    }

    this.pieces[i].obj.style.zIndex = this.pieces[i].group * 2;
    this.shadows[i].obj.style.zIndex = this.shadows[i].group * 2 - 1;
    }
    };

    Puzzle.prototype.SnapPieces = function (obj) {
    if (this.IsPuzzleSolved()) return;
    var group = this.pieces[this.GetPieceIndexByObj(obj)].group;

    for (var i = 0; i < this.Count(); i++) {
    if (this.pieces[i].group === group) {
    var obj1Array = i;
    var obj1 = this.pieces[i].obj; // Up

    if (this.pieces[obj1Array].row > 0) {
    var obj2Array = this.GetPieceIndexByLocation(this.pieces[obj1Array].column, this.pieces[obj1Array].row - 1);

    if (this.pieces[obj1Array].group !== this.pieces[obj2Array].group) {
    var obj2 = this.pieces[obj2Array].obj;
    var offSetX = parseInt(obj2.style.left) - parseInt(obj1.style.left);
    var offSetY = parseInt(obj2.style.top) + parseInt(obj2.style.height) - parseInt(obj1.style.top);

    if (Math.abs(offSetX) <= this.snapDistance && Math.abs(offSetY) <= this.snapDistance) {
    this.MoveGroupPieces(this.pieces[obj1Array].group, offSetX, offSetY);
    this.SetGroup(this.pieces[obj2Array].group, this.pieces[obj1Array].group);
    this.SnapPieces(obj);
    break;
    }
    }
    } // Left


    if (this.pieces[obj1Array].column > 0) {
    obj2Array = this.GetPieceIndexByLocation(this.pieces[obj1Array].column - 1, this.pieces[obj1Array].row);

    if (this.pieces[obj1Array].group !== this.pieces[obj2Array].group) {
    obj2 = this.pieces[obj2Array].obj;
    offSetX = parseInt(obj2.style.left) + parseInt(obj2.style.width) - parseInt(obj1.style.left);
    offSetY = parseInt(obj2.style.top) - parseInt(obj1.style.top);

    if (Math.abs(offSetX) <= this.snapDistance && Math.abs(offSetY) <= this.snapDistance) {
    this.MoveGroupPieces(this.pieces[obj1Array].group, offSetX, offSetY);
    this.SetGroup(this.pieces[obj2Array].group, this.pieces[obj1Array].group);
    this.SnapPieces(obj);
    break;
    }
    }
    } //Down


    if (this.pieces[obj1Array].row < this.rows - 1) {
    obj2Array = this.GetPieceIndexByLocation(this.pieces[obj1Array].column, this.pieces[obj1Array].row + 1);

    if (this.pieces[obj1Array].group !== this.pieces[obj2Array].group) {
    obj2 = this.pieces[obj2Array].obj;
    offSetX = parseInt(obj2.style.left) - parseInt(obj1.style.left);
    offSetY = parseInt(obj2.style.top) - (parseInt(obj1.style.top) + parseInt(obj1.style.height));

    if (Math.abs(offSetX) <= this.snapDistance && Math.abs(offSetY) <= this.snapDistance) {
    this.MoveGroupPieces(this.pieces[obj1Array].group, offSetX, offSetY);
    this.SetGroup(this.pieces[obj2Array].group, this.pieces[obj1Array].group);
    this.SnapPieces(obj);
    break;
    }
    }
    } //Right


    if (this.pieces[obj1Array].column < this.columns - 1) {
    obj2Array = this.GetPieceIndexByLocation(this.pieces[obj1Array].column + 1, this.pieces[obj1Array].row);

    if (this.pieces[obj1Array].group !== this.pieces[obj2Array].group) {
    obj2 = this.pieces[obj2Array].obj;
    offSetX = parseInt(obj2.style.left) - (parseInt(obj1.style.left) + parseInt(obj1.style.width));
    offSetY = parseInt(obj2.style.top) - parseInt(obj1.style.top);

    if (Math.abs(offSetX) <= this.snapDistance && Math.abs(offSetY) <= this.snapDistance) {
    this.MoveGroupPieces(this.pieces[obj1Array].group, offSetX, offSetY);
    this.SetGroup(this.pieces[obj2Array].group, this.pieces[obj1Array].group);
    this.SnapPieces(obj);
    break;
    }
    }
    }
    }
    }

    if (this.IsPuzzleSolved()) {
    this.Solve();
    Issue_PuzzleDone(this.folder);
    }
    };

    Puzzle.prototype.IsPuzzleSolved = function () {
    var isPuzzleSolved = true;
    var group = this.pieces[0].group;

    for (var i = 1; i < this.Count(); i++) {
    if (this.pieces[i].group !== this.pieces[0].group) {
    isPuzzleSolved = false;
    break;
    }
    }

    return isPuzzleSolved;
    };

    Puzzle.prototype.GetPieceIndexByObj = function (obj) {
    for (var i = 0; i < this.Count(); i++) {
    if (this.pieces[i].obj === obj) return i;
    }

    return -1;
    };

    Puzzle.prototype.GetPieceIndexByLocation = function (column, row) {
    for (var i = 0; i < this.Count(); i++) {
    if (this.pieces[i].column === column && this.pieces[i].row === row) return i;
    }

    return -1;
    };

    Puzzle.prototype.SetGroup = function (oldGroup, newGroup) {
    for (var i = 0; i < this.Count(); i++) {
    if (this.pieces[i].group === oldGroup) {
    this.pieces[i].group = newGroup;
    this.pieces[i].obj.style.zIndex = this.pieces[i].group * 2;
    this.shadows[i].group = newGroup;
    this.shadows[i].obj.style.zIndex = this.shadows[i].group * 2 - 1;
    }
    }
    };

    Puzzle.prototype.Shuffle = function () {
    if (this.movime.animating) return;

    for (var i = 0; i < this.Count(); i++) {
    this.pieces[i].group = this.zIndex + i;
    this.shadows[i].group = this.zIndex + i;
    var left = Math.floor(Math.random() * parseInt(this.containerObj).style.width) - parseInt(this.pieces[i].obj).style.width - this.SHADOW_SIZE * 2;
    var top = Math.floor(Math.random() * parseInt(this.containerObj).style.height) - parseInt(this.pieces[i].obj).style.height - this.SHADOW_SIZE * 2;
    var pOffsetX = left + this.SHADOW_SIZE - parseInt(this.pieces[i].obj.style.left);
    var pOffsetY = top + this.SHADOW_SIZE - parseInt(this.pieces[i].obj.style.top);
    this.movime.Insert(this.pieces[i].obj, pOffsetX, pOffsetY, this.movime.MovimeLike.HalfCircle, 1000, false, false); //(this.pieces[i].obj).style.left = (left + this.SHADOW_SIZE) + "px";
    //(this.pieces[i].obj).style.top = (top + this.SHADOW_SIZE) + "px";

    this.pieces[i].obj.style.zIndex = this.pieces[i].group * 2;
    this.movime.Insert(this.shadows[i].obj, pOffsetX, pOffsetY, this.movime.MovimeLike.HalfCircle, 1000, false, false); //(this.shadows[i].obj).style.left = (left) + "px";
    //(this.shadows[i].obj).style.top = (top) + "px";

    this.shadows[i].obj.style.zIndex = this.shadows[i].group * 2 - 1;
    }

    this.movime.Start();
    };

    Puzzle.prototype.Solve = function () {
    if (this.movime.animating) return;

    for (var i = 0; i < this.Count(); i++) {
    var left = parseInt(this.containerObj).style.width - this.columns * this.pieceWidth / 2 + this.pieces[i].column * this.pieceWidth;
    var top = parseInt(this.containerObj).style.height - this.rows * this.pieceHeight / 2 + this.pieces[i].row * this.pieceHeight;
    var pOffsetX = left - parseInt(this.pieces[i].obj).style.left;
    var pOffsetY = top - parseInt(this.pieces[i].obj).style.top;
    this.movime.Insert(this.pieces[i].obj, pOffsetX, pOffsetY, this.movime.MovimeLike.HalfCircle, 1000, false, false);
    this.movime.Insert(this.shadows[i].obj, pOffsetX, pOffsetY, this.movime.MovimeLike.HalfCircle, 1000, false, false);
    }

    this.movime.Start();
    };

    Puzzle.prototype.GetFileName = function (value) {
    if (this.folder.indexOf("Issue") >= 0) return this.folder + (value < 100 ? "0" : "") + (value < 10 ? "0" : "") + value + ".jpg"; else return "Issue001/Games/" + this.folder + "/Piece-" + (value < 100 ? "0" : "") + (value < 10 ? "0" : "") + value + ".jpg";
    };

    Thanks Jen

    Wednesday, October 9, 2019 9:17 PM

Answers

  • User-605499000 posted

    Thank you for your help. I went back and put in the original puzzle file in my new file.  All the above problems have been solved but I am getting a site undefined when I try to open the puzzle. Thanks to your help I was able to solve the other game programs but not the puzzle.  I also will check what you sent me.

    I plan on opening a new ticket with the site undefined if I can't get the answer.

    Thanks for all of your help.

    Jen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 15, 2019 9:43 PM

All replies

  • User-474980206 posted

    Both these lines are runtime errors and were never valid.

    var containerWidth = parseInt(this.containerObj).style.width - parseInt(obj.style.width);                    ( **** this line the width and the next line the height)
    var containerHeight = parseInt(this.containerObj).style.height - parseInt(obj.style.height);

    the parseInt() return an int or nan which does not have a style property. The code was probably supposed to be:

    var containerWidth = parseInt(this.containerObj.style.width) - parseInt(obj.style.width);                    ( **** this line the width and the next line the height)
    var containerHeight = parseInt(this.containerObj.style.height) - parseInt(obj.style.height);

    Thursday, October 10, 2019 12:45 AM
  • User-605499000 posted

    Thanks for getting back to me. I put that in and I had errors and visual studio took it out.  Now I am getting undefined on left.  I have tried everything but no luck.

    Below is just the shuffle paragraph with the error.

    Puzzle.prototype.Shuffle = function () {
    if (this.movime.animating) return;
    for (var i = 0; i < this.Count(); i++) {
    this.pieces[i].group = this.zIndex + i;
    this.shadows[i].group = this.zIndex + i;
    const pOffsetX = left + this.SHADOW_SIZE - parseInt(this.pieces[i].obj.style.left);   (* left is undefined and top will also be undefined)
    const pOffsetY = top + this.SHADOW_SIZE - parseInt(this.pieces[i].obj.style.top);
    this.movime.Insert(this.pieces[i].obj, pOffsetX, pOffsetY, this.movime.MovimeLike.HalfCircle, 1000, false, false); //(this.pieces[i].obj).style.left = (left + this.SHADOW_SIZE) + "px";
    //(this.pieces[i].obj).style.top = (top + this.SHADOW_SIZE) + "px";
    this.pieces[i].obj.style.zIndex = this.pieces[i].group * 2;
    this.movime.Insert(this.shadows[i].obj, pOffsetX, pOffsetY, this.movime.MovimeLike.HalfCircle, 1000, false, false); //(this.shadows[i].obj).style.left = (left) + "px";
    //(this.shadows[i].obj).style.top = (top) + "px";
    this.shadows[i].obj.style.zIndex = this.shadows[i].group * 2 - 1;
    }
    this.movime.Start();
    };

    I spent a couple of house last night trying to find a jigsaw tutorial that will work on my site. Canvas was about the only one but I have not been able to get canvas on my site.

    Do you have any thoughts and thanks again,  

    Jen

    Thursday, October 10, 2019 4:48 PM
  • User-719153870 posted

    Hi bumples18,

    These "Undefined" issues usually mean that a variable that has not been assigned a value is of type undefined. A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value. A function returns undefined if a value was not returned.

    With above code we won't be able to help or even reproduce anything. To be frank, this kind of problem will need you to debug your program with browser devtool by yourself.

    Maybe above document and How to check for “undefined” in JavaScript? could help you learn how you can debug your current js code and avoid this problem.

    Best Regard,

    Yang Shen

    Tuesday, October 15, 2019 5:44 AM
  • User-605499000 posted

    Thank you for your help. I went back and put in the original puzzle file in my new file.  All the above problems have been solved but I am getting a site undefined when I try to open the puzzle. Thanks to your help I was able to solve the other game programs but not the puzzle.  I also will check what you sent me.

    I plan on opening a new ticket with the site undefined if I can't get the answer.

    Thanks for all of your help.

    Jen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 15, 2019 9:43 PM