Discussion on: What does this mean

[Jazzmine McLeod]

I run into this problem.

Uncaught TypeError: Cannot read property 'classList' of undefined
at app.js:176
at Array.forEach ()
at displayShape (app.js:175)
at freeze (app.js:112)
at moveDown (app.js:100)

and

Uncaught TypeError: Cannot read property 'forEach' of undefined
at displayShape (app.js:175)
at freeze (app.js:112)
at moveDown (app.js:100)

`
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 displaySquares = 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 the shape in the mini-grid

function displayShape() {
    displaySquares.forEach(square => {
        square.classList.remove('tetromino')
    })
    upNextTetromino[nextRandom].forEach( index => {
        displaySquares[displayIndex + index].classList.add('tetromino')
    })
}

})

`

[Sachin Patel]

it seems that mini-grid is class name and it's missing . before class name in query selector.
This

const displaySquares = document.querySelectorAll('mini-grid div')

should be (notice . before mini-grid)

const displaySquares = document.querySelectorAll('.mini-grid div')

[Jazzmine McLeod]

Thanks, but I still get the same error