[英]Console log returning empty value when calling for input field variable
為什么在調用文本輸入的變量時 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')
})
這是主題字段:
但它什么都不返回:
在頁面首次加載時,您會在用戶有機會輸入值之前立即讀取輸入值。 改為讀取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>
您需要讀取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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.