DEV Community

loading...

What does this mean

jazzmcleod profile image Jazzmine McLeod ・1 min read

Uncaught TypeError: current.forEach is not a function

Discussion (4)

pic
Editor guide
Collapse
pklaschka profile image
Pablo Klaschka

It seems like you're trying to call the forEach function, that exists on arrays (developer.mozilla.org/de/docs/Web/...) on a non-array element (i.e., current doesn't appear to be an array, meaning you can't call forEach on it).

It would help if you could post the code to reproduce the problem, otherwise, this is about as much help as I'll be able to provide (since I don't have any more context: what is current? In what context are you trying to call forEach on it, etc.).

I hope this still helps 😉

Collapse
jazzmcleod profile image
Jazzmine McLeod Author • Edited

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
Enter fullscreen mode Exit fullscreen mode

// 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')
    })
}
Enter fullscreen mode Exit fullscreen mode

})

`

Collapse
sachinpatel88 profile image
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')
Enter fullscreen mode Exit fullscreen mode

should be (notice . before mini-grid)

const displaySquares = document.querySelectorAll('.mini-grid div')
Enter fullscreen mode Exit fullscreen mode
Thread Thread
jazzmcleod profile image
Jazzmine McLeod Author

Thanks, but I still get the same error