Hay..

Current Situation

I have a function to render 9 Squares in a 3×3 grid where in each Square 9 numbers are generated also in a 3×3 grid.

Along with this i store the created DOM-Nodes in 3 Javascript classes: Grid, Square and Field. Square extends Grid and Field extends Square and Grid.

Wanted Situation

In the end I want that Grid holds an Array of all Squares and an Array of all Fields. Squares and fields should inherit those Arrays then. I require this for a Sudoku generator.

At the moment each Square has all Squares and Each field has all Fields and all Squares. Grid only its own Element and only its own Class.

Is there any way to have a variable in Grid holding Squares and Fields, and everytime a new Field or Square gets constructed, Grid updates this variable? Or is this nesting all wrong?

---

Grid.js

export class GridClass
{
    gridElem;

    constructor()
    {
        this.gridElem = this.getGridElem();
        console.log(this)
    }

    getGridElem = () => document.getElementById("grid");

}

export let GridInstance = new GridClass();

---

Square.js

import {GridClass} from "./Grid";

export class SquareClass extends GridClass
{
    squareElem;
    squares;
    squareID;

    constructor(squares, squareElem, squareID, gridElem)
    {
        super(gridElem);
        this.squareID = squareID;
        this.squares = squares;
        this.squareElem = this.getSquareElem();
    }

    getSquareElem = () => {
        return document.getElementsByClassName("square")[this.squares.length];
    }
}

---

Field.js

import {SquareClass} from "./Square";

export class FieldClass extends SquareClass
{
    fieldElem;
    fields;
    squareElem;

    constructor(gridElem, fieldElem, fields, squares, squareID)
    {
        super(gridElem, squares, squareID);
        console.log(squareID)
        this.fieldElem = fieldElem;
        this.fields = fields;
        this.squareElem = document.getElementsByClassName("square")[this.squares.length-1];
    }
}

---

Renderer.js

import {SquareClass} from "../dom/Square.js";
import {FieldClass} from "../dom/Field.js";

class RendererClass 
{
    squares;
    fields;

    constructor()
    {
        this.squares = new Array();
        this.fields = new Array();
    }

    renderGrid = () => {
        let squareJSON = {
            nodeName: "div",
            classes: ["square", "grid"],
        }
        let fieldJSON = {
            nodeName: "div",
            textNode: "0",
            classes: ["field"],
        }

        for(let squareCount=0; squareCount<9; squareCount++){
            let squareElement = this.createElement(document.getElementById("grid"), squareJSON);
            this.getSquarePosition(squareCount);
            this.squares.push(new SquareClass(this.squares, squareElement, squareCount));

            for(let fieldCount=0; fieldCount<9; fieldCount++) {
                let fieldElement = this.createElement(document.getElementsByClassName("square")[squareCount], fieldJSON);
                this.fields.push(new FieldClass(this.squares, fieldElement, this.fields))
            }
        }
    }
}