app.js 该函数通过html 按钮startPage()调用，但是当被调用时，我收到错误：onclickcreateBoard()未捕获的类型错误：无法读取 null 的属性“appendChild”。我只是想知道是否有什么办法可以解决这个问题，或者它是否存在致命缺陷，必须从头开始。谢谢
3 回答
阿晨1998
TA贡献2037条经验 获得超6个赞
//Initializing global variables
const grid = document.getElementById("grid");
const scoreDisplay = document.getElementById("score");
const width = 8;
const squares = [];
let score = 0;
const candyColors = [
"url(images/red-candy.png)",
"url(images/yellow-candy.png)",
"url(images/orange-candy.png)",
"url(images/purple-candy.png)",
"url(images/green-candy.png)",
"url(images/blue-candy.png)",
];
//Game Home Page
function startPage() {
var myBut = document.getElementById("but");
var button = document.getElementById("button");
myBut.removeChild(button);
createBoard();
}
//create your board
function createBoard() {
for (let i = 0; i < width * width; i++) {
const square = document.createElement('div')
square.setAttribute("draggable", true)
square.setAttribute("id", i)
let randomColor = Math.floor(Math.random() * candyColors.length)
square.style.backgroundImage = candyColors[randomColor]
grid.appendChild(square)
squares.push(square)
}
squares.forEach((square) => square.addEventListener("dragstart", dragStart));
squares.forEach((square) => square.addEventListener("dragend", dragEnd));
squares.forEach((square) => square.addEventListener("dragover", dragOver));
squares.forEach((square) => square.addEventListener("dragenter", dragEnter));
squares.forEach((square) => square.addEventListener("drageleave", dragLeave));
squares.forEach((square) => square.addEventListener("drop", dragDrop));
start_interval();
}
// Dragging the Blocks
let colorBeingDragged;
let colorBeingReplaced;
let squareIdBeingDragged;
let squareIdBeingReplaced;
function dragStart() {
colorBeingDragged = this.style.backgroundImage;
squareIdBeingDragged = parseInt(this.id);
// this.style.backgroundImage = ''
}
function dragOver(e) {
e.preventDefault();
}
function dragEnter(e) {
e.preventDefault();
}
function dragLeave() {
this.style.backgroundImage = "";
}
function dragDrop() {
colorBeingReplaced = this.style.backgroundImage;
squareIdBeingReplaced = parseInt(this.id);
this.style.backgroundImage = colorBeingDragged;
squares[squareIdBeingDragged].style.backgroundImage = colorBeingReplaced;
}
function dragEnd() {
//What is a valid move?
let validMoves = [
squareIdBeingDragged - 1,
squareIdBeingDragged - width,
squareIdBeingDragged + 1,
squareIdBeingDragged + width,
];
let validMove = validMoves.includes(squareIdBeingReplaced);
if (squareIdBeingReplaced && validMove) {
squareIdBeingReplaced = null;
} else if (squareIdBeingReplaced && !validMove) {
squares[squareIdBeingReplaced].style.backgroundImage = colorBeingReplaced;
squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged;
} else
squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged;
}
//drop candies once some have been cleared
function moveIntoSquareBelow() {
for (i = 0; i < 55; i++) {
if (squares[i + width].style.backgroundImage === "") {
squares[i + width].style.backgroundImage =
squares[i].style.backgroundImage;
squares[i].style.backgroundImage = "";
const firstRow = [0, 1, 2, 3, 4, 5, 6, 7];
const isFirstRow = firstRow.includes(i);
if (isFirstRow && squares[i].style.backgroundImage === "") {
let randomColor = Math.floor(Math.random() * candyColors.length);
squares[i].style.backgroundImage = candyColors[randomColor];
}
}
}
}
///Checking for Matches
//for row of Four
function checkRowForFour() {
for (i = 0; i < 60; i++) {
let rowOfFour = [i, i + 1, i + 2, i + 3];
let decidedColor = squares[i].style.backgroundImage;
const isBlank = squares[i].style.backgroundImage === "";
const notValid = [
5,
6,
7,
13,
14,
15,
21,
22,
23,
29,
30,
31,
37,
38,
39,
45,
46,
47,
53,
54,
55,
];
if (notValid.includes(i)) continue;
if (
rowOfFour.every(
(index) =>
squares[index].style.backgroundImage === decidedColor && !isBlank
)
) {
score += 4;
scoreDisplay.innerHTML = score;
rowOfFour.forEach((index) => {
squares[index].style.backgroundImage = "";
});
}
}
}
//for column of Four
function checkColumnForFour() {
for (i = 0; i < 39; i++) {
let columnOfFour = [i, i + width, i + width * 2, i + width * 3];
let decidedColor = squares[i].style.backgroundImage;
const isBlank = squares[i].style.backgroundImage === "";
if (
columnOfFour.every(
(index) =>
squares[index].style.backgroundImage === decidedColor && !isBlank
)
) {
score += 4;
scoreDisplay.innerHTML = score;
columnOfFour.forEach((index) => {
squares[index].style.backgroundImage = "";
});
}
}
}
//for row of Three
function checkRowForThree() {
for (i = 0; i < 61; i++) {
let rowOfThree = [i, i + 1, i + 2];
let decidedColor = squares[i].style.backgroundImage;
const isBlank = squares[i].style.backgroundImage === "";
const notValid = [6, 7, 14, 15, 22, 23, 30, 31, 38, 39, 46, 47, 54, 55];
if (notValid.includes(i)) continue;
if (
rowOfThree.every(
(index) =>
squares[index].style.backgroundImage === decidedColor && !isBlank
)
) {
score += 3;
scoreDisplay.innerHTML = score;
rowOfThree.forEach((index) => {
squares[index].style.backgroundImage = "";
});
}
}
}
//for column of Three
function checkColumnForThree() {
for (i = 0; i < 47; i++) {
let columnOfThree = [i, i + width, i + width * 2];
let decidedColor = squares[i].style.backgroundImage;
const isBlank = squares[i].style.backgroundImage === "";
if (
columnOfThree.every(
(index) =>
squares[index].style.backgroundImage === decidedColor && !isBlank
)
) {
score += 3;
scoreDisplay.innerHTML = score;
columnOfThree.forEach((index) => {
squares[index].style.backgroundImage = "";
});
}
}
}
// Checks carried out indefintely - Add Butotn to clear interval for best practise
function start_interval(){
window.setInterval(function () {
checkRowForFour();
checkColumnForFour();
checkRowForThree();
checkColumnForThree();
moveIntoSquareBelow();
}, 100);
}
一只甜甜圈
TA贡献1836条经验 获得超5个赞
该错误Uncaught TypeError: Cannot read property 'appendChild' of null表明您正在尝试调用appendChildnull 变量。错误发生在这一行：
grid.appendChild(square)
grid确保在初始化时没有为其分配 null 。
const grid = document.getElementById("grid");
慕桂英4014372
TA贡献1871条经验 获得超13个赞
defer向脚本标记添加一个属性（async也可以是一个属性）。 <script async defer src="app.js" charset="utf-8"></script>
这将确保脚本仅在页面加载并且网格实际存在后执行。截至目前，它在 DOM 完全加载之前立即执行。
添加回答
举报
0/150
提交
取消