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

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')
})

这是主题字段：

但是returns没什么:

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>

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

Console log returning empty value when calling for input field variable

html

javascript

forms