js的函数放置前后问题

1.初学js, 用Dom操作html的时候,js中的函数不生效. 两种解决方法都可以解决问题,但是不明白原因.
谢谢

2.错误代码, 函数放在最后不生效

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 22px;
            width: 300px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <button>显示系统时间</button>
    <div>时间</div>
    <script>
        var btn = document.getElementsByTagName('button')
        btn[0].onclick = function () {
            btn[0].innerText = getDate()
        }
        var div = document.getElementsByTagName('div')
        div[0].innerText = getDate()

        var getDate = function () {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var day = date.getDay()
            var Day = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            var hour = date.getHours()
            var minute = date.getMinutes()
            var second = date.getSeconds()
            return year + '年' + month + '月' + dates + '日' + Day[day] + hour + '时' + minute + '分' + second + '秒';
        }
    </script>
</body>

3.解决方法(一)


 var btn = document.getElementsByTagName('button');
        btn[0].onclick = function () {
            btn[0].innerText = getDate()
        }
        var getDate = function () {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var day = date.getDay()
            var Day = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            var hour = date.getHours()
            var minute = date.getMinutes()
            var second = date.getSeconds()
            return year + '年' + month + '月' + dates + '日' + Day[day] + hour + '时' + minute + '分' + second + '秒';
        }
        var div = document.getElementsByTagName('div');
        div[0].innerText = getDate();

解决方法(二)


   var btn = document.getElementsByTagName('button');
        btn[0].onclick = function () {
            btn[0].innerText = getDate()
        }
        var div = document.getElementsByTagName('div');
        div[0].innerText = getDate();
        
        var getDate = function () {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var day = date.getDay()
            var Day = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            var hour = date.getHours()
            var minute = date.getMinutes()
            var second = date.getSeconds()
            return year + '年' + month + '月' + dates + '日' + Day[day] + hour + '时' + minute + '分' + second + '秒';
        }

函数正常写法都是先定义后使用，正确写法写到最上面

如果不写到上面可以改为function getDate () {}

var getDate = function () 这句代码相当于
1，在script第一句 var getDate
2，在原位置 getDate = function ()

而你的代码都在1 和2 的中间所以会报错 getDate is not a function

js的函数 放置前后问题

js的函数放置前后问题