Not sure how to make my function call properly [duplicate]

I am attempting to call a function from the program, however it only calls if inside a button tag I’m trying to get it to call automatically when the page runs, or call it from inside another function, but it doesn’t seem to work.
contents of function not important (I think)

<head>
<script>
const x = Number(prompt("enter number"))
function createGridCells() {
        var y = document.getElementsByTagName("p2")[0];
        square = "<div class="grid-item"></div>"
        wall = "<div class="grid-space"></div>"
        let z = ((square + wall))
        a = z.repeat(x-1)
        b = a + square
        c = wall.repeat(x*2 - 1)
        d = b + c
        e = d.repeat(x-1)
        f = e + d
        g = f + square
        y.outerHTML = f
    }
function createGridSize() {
        pixelNum = "45px 5px "
        columnsAndRows = pixelNum.repeat(x-1)
        declaration = document.styleSheets[0].cssRules[0].style;
        setProp = declaration.setProperty("grid-template-columns", columnsAndRows + "45px");
        declarationTwo = document.styleSheets[0].cssRules[0].style;
        setPropTwo = declarationTwo.setProperty("grid-template-rows", columnsAndRows + "45px");
}
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()
            }
        
    
</script>
</head>
<body>
<script>
createGridCells()
createGridSize()



</script>
<button onclick="createGridCells()">cells</button>
<button onclick="createGridSize()">size</button>
<div class="grid-container">
<p2></p2>
</div>
</body>