函数仅可通过button调用，页面加载自动调用及函数内调用失效求助

核心问题：DOM未加载完成就执行函数 #

你的页面初始化脚本放在<body>开头，此时<p2>元素和样式表规则还没被浏览器解析完成，导致createGridCells()和createGridSize()执行时找不到目标元素或样式规则，进而触发失败。而点击按钮时DOM已完全加载，所以函数能正常运行。

具体修复步骤 #

1. 等待DOM加载完成后执行初始化 #

将初始化代码放到DOMContentLoaded事件监听中，或者移到<body>末尾（确保所有DOM元素已解析）：

<body>
<button onclick="createGridCells()">cells</button>
<button onclick="createGridSize()">size</button>
<div class="grid-container">
<p2></p2>
</div>
<script>
// 监听DOM加载完成事件
document.addEventListener('DOMContentLoaded', function() {
    createGridCells();
    createGridSize();
});
</script>
</body>

2. 修复变量未声明的问题 #

函数内的square、wall等变量未用var/let/const声明，会成为全局变量引发意外问题，补上声明：

function createGridCells() {
    var y = document.getElementsByTagName("p2")[0];
    const square = "<div class=\"grid-item\"></div>";
    const wall = "<div class=\"grid-space\"></div>";
    const z = square + wall;
    const a = z.repeat(x-1);
    const b = a + square;
    const c = wall.repeat(x*2 - 1);
    const d = b + c;
    const e = d.repeat(x-1);
    const f = e + d;
    const g = f + square;
    y.outerHTML = f;
}

3. 优化样式表访问逻辑 #

直接通过DOM元素设置内联样式，避免document.styleSheets访问可能出现的加载顺序或权限问题：

function createGridSize() {
    const pixelNum = "45px 5px ";
    const columnsAndRows = pixelNum.repeat(x-1);
    const gridContainer = document.querySelector('.grid-container');
    gridContainer.style.gridTemplateColumns = columnsAndRows + "45px";
    gridContainer.style.gridTemplateRows = columnsAndRows + "45px";
}

4. 修复runMaze函数语法错误 #

函数缺少闭合括号，补上后才能正常调用：

function runMaze(){
    var randomInt = Math.floor(Math.random() * 4);
    if (randomInt == 1 ){
        moveRight();
    }
    if (randomInt == 2){
        moveLeft();
    }
    if (randomInt == 3){
        moveUp();
    }
    if (randomInt == 4){
        moveDown();
    }
} // 补上闭合括号

验证修复 #

调整后，页面加载时会自动执行初始化函数，也可以在其他函数内部调用这些方法，示例：

function initAll() {
    createGridCells();
    createGridSize();
    runMaze();
}
document.addEventListener('DOMContentLoaded', initAll);

内容的提问来源于stack exchange，提问作者Ralph Arrigoni