i was making tetris game it works perfectly but after it freezes on the the bottom the code stops

Question

I made 200 empty divs in of a div called grid I draw the tetromino of the empty divs

    document.addEventListener('DOMContentLoaded', () => {
    
        const grid = document.querySelector('.grid')
        let squares = Array.from(document.querySelectorAll('.grid div'))
        const ScoreDisplay = document.querySelector('#score')
        const StartBtn = document.querySelector('start-button')
    
        let width = 10
        
        //The tetrominoes
    
        const lTetromino =[ [1, width + 1, width* 2 + 1, 2],
        [width , width + 1 , width + 2 , width * 2 + 2  ],
        [1 , width + 1 , width * 2 , width * 2 + 1],
        [width, width * 2 , width * 2 + 1 , width * 2 + 2]
        ]
    
    
        const zTetromino =[ 
        [width * 2 , width + 1 , width * 2 + 1 , width + 2],
        [0 , width , width + 1 , width * 2 + 1],
        [width * 2 , width + 1 , width * 2 + 1 , width + 2],
        [0 , width , width + 1 , width * 2 + 1]
        ]
    
    
        const tTetromino = [
            [width, 1 , width + 1 , width + 2],
            [1 , width + 1 , width + 2 , width * 2 + 1 ],
            [width , width + 1 , width + 2 , width * 2 + 1],
            [width, 1 , 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 theTetrominoes = [lTetromino, zTetromino, tTetromino, oTetromino, iTetromino]
        //currentposition is used in the draw function 
        let currentPosition = 4
    
        let currentRotation = 0
    //randomly select a tetromino and its first rotation
        let random = Math.floor(Math.random()*theTetrominoes.length)
        let array = [1, 3, 4, 5]
        console.log()
        let current =  theTetrominoes[random][currentRotation]
        
    
    // draw the tetromino
        function draw(){
            current.forEach(index => {
                squares[currentPosition + index].classList.add('tetromino')
            })
        }
    
        draw()
        
    
        function undraw(){
            current.forEach(index => {
                squares[currentPosition + index].classList.remove('tetromino')
            })
        }
        
    
    
    //freeze function
        function freeze() {
            if(current.some(index => squares[currentPosition + index + width].classList.contains('taken'))){
                current.forEach(index => squares[currentPosition + index].classList.add('taken'))
                
            }
        }
    
        let timeID = setInterval(movedown, 500)
        // move down fuction
        function movedown(){
            undraw()
            currentPosition += width 
            draw()
            freeze()
        }
    
        
        
    })  

I made 200 empty divs in of a div called grid I draw the tetromino of the empty divs

after the tetromino hit the bottom of the div an error occurs it doesn't draw again

this is the error i get

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
    at app.js:73:46
    at Array.forEach (<anonymous>)
    at draw (app.js:72:17)
    at movedown (app.js:103:9)



Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
    at app.js:82:46
    at Array.forEach (<anonymous>)
    at undraw (app.js:81:17)
    at movedown (app.js:101:9)


321app.js:82 Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
    at app.js:82:46
    at Array.forEach (<anonymous>)
    at undraw (app.js:81:17)
    at movedown (app.js:101:9)

unless i reupdate CURRENTPOSITION,RANDOM AND CURRENT to their original value

Answer 1

you never stop calling moveDown - so currentPosition will keep going up by width until squares[currentPosition + index] is beyond the length of squares array, thus it is undefined which has no classList property - I guess once frozen in the freeze function, you need to pick a new random tetromino and position it at the top of the grid.

credits : Jaromanda X