Question

未捕获的类型错误：无法在 Javascript 中读取未定义的属性“value”（读取“classList”）

2022-01-10

759

javascript html dom undefined typeerror

因此，显然此代码末尾的 draw() 函数是导致此错误的罪魁祸首。我在这里看到了有关此问题的其他问题，我猜是下面的行溢出了还是怎么回事？

"blocks[currentPosition + index].classList.add('sonicBlock');"

但我仍然不知道解决该问题的方法是什么。FWIW 我基于这个俄罗斯方块示例： https://youtu.be/w1JJfK09ujQ?t=2424 当我使用 img url 时，她试图制作 CSS bg 彩色方块，所以我想知道这是否与它有关？每个 img 都是 16px x 24px。非常感谢大家花时间查看。

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


    //DEFAULT/CONST VALUES
    const fieldHorizontal = 16; //128
    const fieldVertical = 24; //192
    const width = 8;

    const blu = 0;
    const red = 1;
    const yel = 2;

    const container = document.querySelector(".activePlayField");
    const ScoreDisplay = document.querySelector('#score');
    const StartBtn = document.querySelector('#start_button');

   

    const sonicColors = [
        'url(sonics/sonicblue.png)',
        'url(sonics/sonicred.png)',
        'url(sonics/sonicyellow.png)',
    ]



    //PIECES
    const piece_BBBB = [
        [sonicColors[blu], sonicColors[blu], sonicColors[blu], sonicColors[blu]],
        [sonicColors[blu], sonicColors[blu], sonicColors[blu], sonicColors[blu]],
        [sonicColors[blu], sonicColors[blu], sonicColors[blu], sonicColors[blu]],
        [sonicColors[blu], sonicColors[blu], sonicColors[blu], sonicColors[blu]]
    ]

    const piece_BBBR = [
        [sonicColors[blu], sonicColors[blu], sonicColors[blu], sonicColors[red]],
        [sonicColors[blu], sonicColors[blu], sonicColors[red], sonicColors[blu]],
        [sonicColors[blu], sonicColors[red], sonicColors[blu], sonicColors[blu]],
        [sonicColors[red], sonicColors[blu], sonicColors[blu], sonicColors[blu]],
    ]

    const piece_BBRR = [
        [sonicColors[blu], sonicColors[blu], sonicColors[red], sonicColors[red]],
        [sonicColors[blu], sonicColors[red], sonicColors[red], sonicColors[blu]],
        [sonicColors[red], sonicColors[red], sonicColors[blu], sonicColors[blu]],
        [sonicColors[red], sonicColors[blu], sonicColors[blu], sonicColors[red]],
    ]



    const allPieces = [piece_BBBR, piece_BBBB, piece_BBRR]

    let random = Math.floor(Math.random() * allPieces.length);

    let currentPosition = 6;
    let currentPiece = allPieces[0][0];



    //
    function createGrid (n1, n2) {


        container.style.gridTemplateRows = `repeat(${n1}, 1fr)`
        container.style.gridTemplateColumns = `repeat(${n2}, 1fr)`

    
        for (let i = 0; i < (n1 * n2); i++) {
            let cell = document.createElement("div");
            cell.className = "cell";
            cell.id = `cell${i}`;
            container.appendChild(cell);
            
        }

    }

    createGrid (fieldHorizontal, fieldVertical); // draw play field grid

    let blocks = Array.from(document.querySelectorAll('.cell'));


    function draw() {

        currentPiece.forEach(index => {
            blocks[currentPosition + index].classList.add('sonicBlock');
        })
    }

    draw();

 














})

body {
    background: rgb(207, 74, 196);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.activePlayField {
    display: flex;
    flex-wrap: wrap;
    width: 128px;
    height: 192px;
    background-image: url("grid.png");
}
  
.activePlayField > div {
    width: 8px;
    height: 8px;
    opacity: 40%;

}

.sonicBlock {
    display: flex;
    flex-wrap: wrap;
    width: 32px;
    height: 48px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css"></link>
    <script src="app.js" charset="UTF-8"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Segasonic</title>
</head>
<body>

    <h3>Score:<span id="score">0</span></h3>
    <button id="start_button">Start</button>
    
    <div class="activePlayField"></div>

</body>
</html>

Answer 1

使用 .forEach 时，第一个参数包含数组的当前元素。

someValues.forEach((element) => {
    console.log(element);
});

如果您想获取当前元素的索引。您应该使用第二个参数传递索引。

尝试以下操作：

function draw() {

        currentPiece.forEach((element,index) => {
            blocks[currentPosition + index].classList.add('sonicBlock');
        })
    }