Javascript Errors
Tags: javascript, beginners
Published: 2021-01-23 14:24:57

![Screen Shot 2021-01-23 at 9.20.24 AM](https://dev-to-uploads.s3.amazonaws.com/i/0enbd9taieexcumz9blr.png)


 I get this error in my code and I've been stuck for the last few days. Code below. Can someone please explain what is going on?






document.addEventListener('DOMContentLoaded', () =>  {

    const grid = document.querySelector('.grid')
    let squares = document.querySelectorAll('.grid div')
    const ScoreDisplay = document.querySelector('#score')
    const StartBtn = document.querySelector('#start-button')
    const width = 10
    let nextRandom = 0


// The Tetrominoes

    const lTetromino = [
        [1, width+1, width*2+1, 2],
        [width, width+1, width*2+1, width*2+2],
        [1, width+1, width*2+1, width*2],
        [width, width*2, width*2+1, width*2+2]
    ]


    const zTetromino = [
        [0, width, width+1, width*2+1],
        [width+1, width+2, width*2, width*2+1],
        [0, width, width+1, width*2+1],
        [width+1, width+2, width*2, width*2+1]
    ]


    const tTetromino = [
        [1, width, width+1, width+2],
        [1, width+1, width+2, width*2+1],
        [width, width+1, width+2, width*2+1],
        [1, width, width+1, width*2+1]
    ]

    const oTetromino = [
        [0, 1, width, width+1],
        [0, 1, width, width+1],
        [0, 1, width, width+1],
        [0, 1, width, width+1]
    ]

    const iTetromino = [
        [1, width+1, width*2+1, width*3+1],
        [width, width+1, width+2, width+3],
        [1, width+1, width*2+1, width*3+1],
        [width, width+1, width+2, width+3]
    ]

    const theTetromino = [lTetromino, zTetromino, tTetromino, oTetromino, iTetromino]

    let currentPosition = 4
    let currentRotation = 0
    // randomly select a tetromino and its rotation
    let random = Math.floor(Math.random()*theTetromino.length)
    let current = theTetromino[random][currentRotation]

    // draw the tetromino

    function draw () {
        current.forEach(index => {
            squares[currentPosition + index].classList.add('tetromino')
        })
    }

    // undraw the tetromino

    function undraw () {
        current.forEach(index => {
            squares[currentPosition + index].classList.remove('tetromino')
        })
    }


    // make the tetromino move down every second. grid

    timerId = setInterval(moveDown, 1000)

    // keyCode
    function control (e) {
        if(e.keyCode === 37) {
            moveLeft()
        } else if (e.keyCode === 38) {
            rotate()
        } else if (e.keyCode === 39) {
            moveRight()
        } else if (e.keyCode === 40) {
            moveDown()
        }
    
    }
    document.addEventListener('keyup', control)

    // move down function

    function moveDown () {
        undraw()
        currentPosition += width
        draw()
        freeze()
    }
    // freeze function
    function freeze() {
        if(current.some(index => squares[currentPosition + index + width].classList.contains('taken'))) {
        current.forEach(index => squares[currentPosition + index].classList.add('taken'))
        // start new tetromino falling
        random = nextRandom
        nextRandom = Math.floor(Math.random() * theTetromino.length)
        current = theTetromino[random][currentRotation]
        currentPosition = 4 
        draw()
        displayShape()
        }
    }

    // move the tetromino left

    function moveLeft() {
        undraw()
        const isAtLeftEdge = current.some(index => (currentPosition + index) % width === 0)

        if(!isAtLeftEdge) currentPosition -=1

        if(current.some(index => squares[currentPosition + index].classList.contains('taken'))) {
            currentPosition +=1
        }
        draw()
    }

    // move the tetromino right, unless is at the edge of the block
    function moveRight(){
        undraw()
        const isAtRightEdge = current.some(index => (currentPosition + index) % width === width -1)
        if(!isAtRightEdge) currentPosition +=1

        if(current.some(index => squares[currentPosition + index].classList.contains('taken'))) {
            currentPosition -=1
        }

        draw()
    }

    // rotate the tetromino
    function rotate () {
        undraw()
        currentRotation ++
        if(currentRotation === current.length){ // if the current rotation gets to 4
            currentRotation = 0
        }
        current = theTetromino[random][currentRotation]
        draw()
    }

    // show up-next tetromino in mini-grid

    const displaySquare = document.querySelectorAll('mini-grid div')
    const displayWidth = 4
    let displayIndex = 0

    // the tetromino w/o rotation
    const upNextTetromino = [
        [1, displayWidth+1, displayWidth*2+1, 2], //lTetromino
        [0, displayWidth, displayWidth+1, displayWidth*2+1], // zTetromino
        [1, displayWidth, displayWidth+1, displayWidth+2]
        [0, 1, displayWidth, displayWidth+1],
        [1, displayWidth+1, displayWidth*2+1, displayWidth*3+1]
        ]



    // display mini grid
    function displayShape() {
        //remove any trace of tetromino from the grid
        displaySquare.forEach(squares => {
            squares.classList.remove('tetromino')
        })
        upNextTetromino[nextRandom].forEach( index => {
            displaySquare[displayIndex + index].classList.add('tetromino')
        })
    }









})