一個(gè)input值的奇怪問題

HTML代碼：

<form>
    標(biāo)題: <input type="text" name="title" id="demo1"/>
    <br><button id="myBtn">提交button</button>
</form>

JS代碼部分：

<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script>
var btn = document.getElementById('myBtn')
var title1 = $('#demo1')[0].value
btn.onclick = function (e) {
    console.log(title1)
    console.log($('#demo1')[0].value)
    console.log('clicked...')
    e.preventDefault()
}
</script>

一個(gè)很奇怪的問題，我在頁(yè)面上輸入aaa，在控制臺(tái)上console.log(title1)為什么是空的呢？而下面的console.log($('#demo1')[0].value)卻能正確現(xiàn)實(shí)數(shù)據(jù)？
如下：

想不明白，請(qǐng)各位幫忙看看，謝謝了！