表单值为空

Question

我正在制作一个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，用于复制目的

    <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>

Answer 1

[<input type="text" id="secondLetter">没有属性value，因此document.querySelector('#secondLetter').value将是一个空字符串。

（（如果您想在输入中键入内容并then读取值，那么您的JS将需要等待，直到键入了某些内容……您通常会使用事件监听器）。

Answer 2

您的第一个代码在页面加载时运行（您的表单提示）：

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

因此secondLetter将被设置为值“”，即使您的表单将被提交为变量[[已经是 t，因此您也将获得“”。

在第二代码处：将secondLetter设置为元素引用，并且仅在提交时才将值提供给secondLetter，而不是在提交之前。