Need a conversion from Jquery to vanilla javascript-CodePudding

Having issues transforming this from JQuery to javascript. I have tried the document.getElementbyClassName("tile").style.left = x * tileWidth tileDepth * z tileOffsetLeft "px". But it doesn't like that and gives me the error Cannot set properties of undefined (setting 'left').

export function createTiles() {
    for (let counter = 0; counter < coordinates.length; counter  ) {
        const coord = coordinates[counter];
        const [x,y,z] = coord;
        const image = images[counter];

        const tile = $("<div></div>")
            .addClass("tile")
            .css({
                left: x * tileWidth   tileDepth * z   tileOffsetLeft   "px",
                top: y * tileHeight   tileDepth * z   tileOffsetTop   "px",
                zIndex: z
            });
        const tileFront = $("<div></div>")
            .addClass("tileFront")
            .css({
                width: tileWidth   "px",
                height: tileHeight   "px",
                borderRadius: tileRoundness   "px"
            })
            .append(image);
        tile.append(tileFront).appendTo("#game");        
    }
}

CodePudding user response：

change .addClass("tileFront") to .classList.add("tileFront") try it

CodePudding user response：

Maybe something like this could work.

export function createTiles() {
  for (let counter = 0; counter < coordinates.length; counter  ) {
    const coord = coordinates[counter];
    const [x, y, z] = coord;
    const image = images[counter];

    const tile = document.createElement("div");
    tile.classList.add("tile");
    tile.style.left = x * tileWidth   tileDepth * z   tileOffsetLeft   "px";
    tile.style.top = y * tileHeight   tileDepth * z   tileOffsetTop   "px";
    tile.style.zIndex = z;

    const tileFront = document.createElement("div");
    tileFront.classList.add("tileFront");
    tileFront.style.width = tileWidth   "px";
    tileFront.style.height = tileHeight   "px";
    tileFront.style.borderRadius = tileRoundness   "px";
    tileFront.append(image);

    tile.append(tileFront);
    document.getElementById("game").append(tile);
  }
}