调用输入字段变量时控制台日志返回空值

Question

为什么在调用文本输入的变量时 console.log 返回一个空行。

HTML

                        <label for="subject">Subject</label>
                        <input type="text" id="subject" name="ticket-subject" />

Javascript

我尝试了实际的表单，它的console.log在提交时工作得很好，但不知何故ticketSubject的值似乎是空的。

const ticketForm = document.querySelector('.ticket-form')
const ticketSubject = document.getElementById('subject').value;

ticketForm.addEventListener('submit', (e)=> {
    e.preventDefault()
    console.log(ticketSubject)
    console.log('The form submit works')
})

这是主题字段：

但它什么都不返回：

Answer 1

在页面首次加载时，您会在用户有机会输入值之前立即读取输入值。 改为读取submit事件处理程序中的值：

 const ticketForm = document.querySelector('.ticket-form') ticketForm.addEventListener('submit', (e)=> { e.preventDefault() // read the value here const ticketSubject = document.getElementById('subject').value; console.log(ticketSubject) console.log('The form submit works') })

 <form class="ticket-form"> <label for="subject">Subject</label> <input type="text" id="subject" name="ticket-subject" /> <input type="submit" value="Submit" /> </form>

Answer 2

您需要读取addEventListener()处理程序中的值，否则该值会在事件发生之前存储，并且永远不会显示在console.log()上

 const ticketForm = document.querySelector('.ticket-form') ticketForm.addEventListener('submit', e => { e.preventDefault() console.log(document.getElementById('subject').value); console.log('The form submit works') })

 <form class="ticket-form"> <label for="subject">Subject</label> <input type="text" id="subject" name="ticket-subject" /> <button type="submit"> submit</button> </form>