我正在制作一个 UI，下面是我从表单获取输入的基本内容，但如果我这样做，它不会显示 secondLetter 的值

const form = document.querySelector('#form');

let firstLetter = document.querySelector('#firstLetter').value;

let secondLetter = document.querySelector('#secondLetter').value;

const output = document.querySelector('#check');

form.addEventListener('submit', function(e){

e.preventDefault();

console.log(secondLetter);

})

但是如果这样做的话

const form = document.querySelector('#form');

let firstLetter = document.querySelector('#firstLetter').value;

let secondLetter = document.querySelector('#secondLetter');

const output = document.querySelector('#check');

form.addEventListener('submit', function(e){

e.preventDefault();

console.log(form.secondLetter.value);

})

我得到了价值。我不明白我做错了什么或者为什么第二个例子有效而不是第一个。以下是我用于复制目的的 HTML