js动态金字塔的显示相关问题

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script type="text/javascript">
        window.onload=function(){
            //创建一个p添加到div2下
            myClick("btn01",function(){
                
                //获取两个值
                var count=document.getElementById("count");
                var point=document.getElementById("point");
                var box2=document.getElementById("box2");
                
                for(var i=1;i<=count;i++){
                    var p=document.createElement("p");
                    for(var j=1;j<=i;j++){
                        var logo=document.createTextNode(point);
                        p.appendChild(logo);
                    }
                    box2.appendChild(p);
                }
            });
            
            function myClick(idStr,fun){
                var btn=document.getElementById(idStr);
                btn.onclick=fun;
            }
        };
    </script>
</head>
<style type="text/css">
    body{
        text-align: center;
    }
</style>
<body>
    <div id="box1">
        <h2>输出塔形</h2>
        <br><br>
        行数:
        <input type="text" id="count" value="" />
        <br />
        符号:
        <input type="text" id="point" value="" />
        <br>
        <button type="button" id="btn01">输出</button>
    </div>
    <br>
    <div id="box2">
        
    </div>
    <script type="text/javascript">
        
    </script>
</body>
</html>

 

代码至是简单的第一行一个第二个两个,具体功能没有实现,

但关键是不能在div2里显示出来,调试了一个早上也没找出问题,很痛苦求解答

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    
</head>
<style type="text/css">
    body{
        text-align: center;
    }
</style>
<body>
    <div id="box1">
        <h2>输出塔形</h2>
        <br><br>
        行数:
        <input type="text" id="count" value="" />
        <br />
        符号:
        <input type="text" id="point" value="" />
        <br>
        <button type="button" id="btn01">输出</button>
    </div>
    <br>
    <div id="box2">
        
    </div>

    <script type="text/javascript">
        window.onload=function(){
            //创建一个p添加到div2下
            myClick("btn01",function(){
                
                //获取两个值
                var count=document.getElementById("count");
                var point=document.getElementById("point");
                var box2= document.getElementById("box2");
                console.log(count);
                for(var i=1;i<=count.value;i++){
                    var p=document.createElement("p");
                    for(var j = 1;j<= i;j++){
                        var logo=document.createTextNode(point.value);
                        p.appendChild(logo);
                    }
                    box2.appendChild(p);
                }
            });
            
            function myClick(idStr,fun){
                var btn=document.getElementById(idStr);
                btn.onclick=fun;
            }
        };
    </script>
    <script type="text/javascript">
        
    </script>
</body>
</html>