Javascript 表单值为空

我正在制作一个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);
})

但是如果你喜欢的话

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复制目的

    <form id="form">
    <label for="firstLetter">First Letter</label>
        <input type="text" id="firstLetter">
    <label for="secondLetter">Second Letter</label>
        <input type="text" id="secondLetter">
    <input type="submit" id="check">
</form>

第一个字母
第二个字母

没有

值

属性，因此

文档.querySelector（'#secondLetter'）。值

将是一个空字符串

（如果您想在输入中键入某个内容，然后读取该值，那么JS将需要等待，直到键入内容为止……您通常会使用事件侦听器进行此操作）。

没有
值
属性，因此
document.querySelector（“#secondLetter”）.value
将是一个空字符串

（如果您想在输入中键入某个内容，然后读取该值，那么JS需要等待，直到键入某个内容为止……您通常会使用事件侦听器进行此操作）。
当页面加载时，您的第一个代码将运行（您的表单laod）：

因此，secondLetter将设置为值“”，即使在提交表单时，变量已经是set，因此您将得到“”

在第二个代码处：您将secondLetter设置为元素引用，并且只有在提交时才将值指定给secondLetter，而不是在提交之前。
页面加载时，您的第一个代码将运行（您的表单laod）：

因此，secondLetter将设置为值“”，即使在提交表单时，变量已经是set，因此您将得到“”

在第二个代码中：您将secondLetter设置为元素引用，并且只有在提交时才将值赋予secondLetter，而不是在提交之前。
但是我要求在submit的事件侦听器上输入值。@Nofel-否。您要求在该事件侦听器之外输入值，并将其分配给变量。稍后您将读取该变量的值。但我要求在submit的事件侦听器上输入值。@Nofel-否。您要求在该事件侦听器之外输入值，并将其分配给变量。稍后您将读取该变量的值。