关于FormData的一个弱弱的问题

[小碗不放香菜]

<form id="form">
<input type="text" name="username">
<input type="password" name="password">
<input type="button" value="提交" id="btn">
</form>
<script>
var form = document.getElementById('form')
var btn = document.getElementById('btn')
var formdata = new FormData(form)
btn.onclick = function () {
var formdata2 = new FormData(form)
console.log(formdata.get('username'))
console.log(formdata2.get('username'))
}
</script>

var formdata = new FormData(form) 这一行，定义在 btn.onclick外为什么不行？
var formdata2 = new FormData(form)写在btn.onclick内就可以。

恳求大神指点，谢谢

[Stephen_112]

不是不行，是没有内容而已么，写在外面的时候，当页面渲染的时候就已经获取了值，但是渲染的时候没有任何内容，就是空了，当点击提交按钮的时候，打出来的内容已经是早就获取好的空内容了，只有在点击的时候再获取才能够读的到input框的中内容。

[小碗不放香菜]

非常感谢！让大神见笑了，你这么一解释非常清楚，谢啦